canvas制图，正方形，圆形，以及圆的线性渐变（手机端页面）

最新推荐文章于 2024-10-22 16:14:28 发布

奋斗吧，小码农

最新推荐文章于 2024-10-22 16:14:28 发布

阅读量5.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html canvas 线性渐变 canvas封装手机端页面

本文链接：https://blog.youkuaiyun.com/O_ooooo/article/details/52993232

前端专栏收录该内容

11 篇文章

订阅专栏

这篇博客详细介绍了如何在手机端页面使用HTML5 Canvas进行图形绘制，包括创建正方形、圆形，并且重点讲解了如何实现圆的线性渐变效果，为移动端开发提供了实用的Canvas封装技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<body>
	<div id="main">
		<canvas id="mycanvas"></canvas>
		<p id="technology"></p>
		<p id="mainData"></p>
		<p id="project"></p>
		<p id="transportation"></p>	
		<p id="gray"></p>	
		<p id="red"></p>	
		<p id="blue"></p>	
		<p id="green"></p>	
	</div>		
</body>

css代码

<style>
	body,p,div{
		margin:0;
		padding: 0;
	}
	p{
		display: inline-block;
		position: absolute;				
		font-size: 2.6rem;
		font-family: "SimHei";
		color:#7c7c7c;
	}
	#technology{
		top:238px;
		left:115px;
	}
	#mainData{
		top:73px;
		left:263px;
		text-align: right;
	}
	#project{
		top:73px;
		left:623px;
	}
	#transportation{
		top:236px;
		left:764px;
	}
	#gray{
		top:573px;
		left:100px;
	}
	#red{
		top:647px;
		left:96px;
	}
	#blue{
		top:573px;
		left:772px;
	}
	#green{
		top:647px;
		left:772px;
	}
</style>

js：

<script>
	window.onload=function(){//取到当前屏幕的宽，高
		var width=window.innerWidth;
		var height=window.innerHeight;
		//canvas的设置
		var canvas=document.getElementById("mycanvas");
		var cxt=canvas.getContext('2d');
		canvas.width=width*0.95;
		canvas.height=height*0.6;
		//封装画圆的方法
		function drawArc(x, y, radius, startAngle, endAngle, anticlockwise, isOnlyArc, isFill,isShodow,shadowOffsetX,shadowOffsetY,shadowColor,shadowBlur,bgColor,lineWidth) {  
			if (isFill) { //实心圆  
			    cxt.fillStyle = bgColor;  
			    cxt.lineWidth=lineWidth;
			//判断是否有阴影
			if(isShodow){
			    cxt.shadowColor=shadowColor;
				cxt.shadowOffsetX=shadowOffsetX;
				cxt.shadowOffsetY=shadowOffsetY;
				cxt.shadowBlur=shadowBlur;
			    }else{ }
			    cxt.beginPath();  
			    cxt.arc(x, y, radius, startAngle, endAngle, anticlockwise);  
			    cxt.closePath();  
			    cxt.fill(); 		        
			    } else { //空心圆  
			    cxt.strokeStyle = bgColor; 
			    cxt.lineWidth=lineWidth;
			    cxt.beginPath();  
			    cxt.arc(x, y, radius, startAngle, endAngle, anticlockwise);  
			        if (isOnlyArc) { //绘制边框的另一种情况就是仅仅绘制弧边不需要调用closePath()  
			  
			        } else { //否则就是不仅绘制边框还得绘制起点和终点的连线，需要调用了closePath();  
			            cxt.closePath();  
			        }  		  
			        cxt.stroke();  
			    }  
			}; 
		//封装绘制正方形的方法
		function drawRect(x,y,width,height,bgColor){
			cxt.fillStyle=bgColor;
			cxt.beginPath();
			cxt.fillRect(x,y,width,height);
			cxt.closePath();
			cxt.fill();
		}
		//1.绘制半圆
			drawArc(canvas.width*0.49,canvas.width*0.5,canvas.width*0.35,0,Math.PI,true,true,false,false,0,0,"#fff",0,"#d9d9da",6);
		//2.技术
			//2.1技术大圆
			drawArc(canvas.width*0.17,canvas.width*0.35,canvas.width*0.04,0,Math.PI*2, false, false, true,false,0,0,"#fff",0, "#2f9bf0",1);
			//2.2技术小圆
			var technology=cxt.createLinearGradient(canvas.width*0.17,canvas.width*0.38,canvas.width*0.19,canvas.width*0.34);
			/*找到圆线性渐变的重要的几个点的位置*/
			technology.addColorStop(0,'#adadad');
			technology.addColorStop(1,'#fffffd');
			drawArc(canvas.width*0.17,canvas.width*0.35,canvas.width*0.025,0,Math.PI*2, false, false, true,false,0,0,"#fff",0, technology,1);
		//3.采购
			//3.1主要大圆
			drawArc(canvas.width*0.34,canvas.width*0.18,canvas.width*0.05,0,Math.PI*2, false, false, true,false,0,0,"#fff",0,  "#f04638",1);
			//3.2主要小圆
			var main=cxt.createLinearGradient(canvas.width*0.3,canvas.width*0.2,canvas.width*0.35,canvas.width*0.17);
			main.addColorStop(0,'#adadad');
			main.addColorStop(1,'#fffffd');
			drawArc(canvas.width*0.34,canvas.width*0.18,canvas.width*0.033,0,Math.PI*2, false, false, true,false,0,0,"#fff",0, main,1);
		//4.生产
			//4.1生产大圆
			drawArc(canvas.width*0.64,canvas.width*0.19,canvas.width*0.06,0,Math.PI*2, false, false, true,false,0,0,"#fff",0,  "#19c5b0",1);
			//3.2生产小圆
			var product=cxt.createLinearGradient(canvas.width*0.61,canvas.width*0.23,canvas.width*0.645,canvas.width*0.18);
			product.addColorStop(0,'#adadad');
			product.addColorStop(1,'#fffffd');
			drawArc(canvas.width*0.64,canvas.width*0.19,canvas.width*0.04,0,Math.PI*2, false, false, true,false,0,0,"#fff",0, product,1);
		//5.运输
			//5.1运输大圆
			drawArc(canvas.width*0.82,canvas.width*0.38,canvas.width*0.07,0,Math.PI*2, false, false, true,false,0,0,"#fff",0, "#d7dada",1);
			//5.1运输小圆
			var transform=cxt.createLinearGradient(canvas.width*0.77,canvas.width*0.38,canvas.width*0.84,canvas.width*0.35);
			transform.addColorStop(0,'#adadad');
			transform.addColorStop(1,'#fffffd');
			drawArc(canvas.width*0.82,canvas.width*0.38,canvas.width*0.05,0,Math.PI*2, false, false, true,false,0,0,"#fff",0, transform,1);
		//6.半圆端点
			drawArc(canvas.width*0.14,canvas.width*0.5,canvas.width*0.01,0,Math.PI*2, false, false, true,false,0,0,"#fff",0, "#a0a0a0",1);
			drawArc(canvas.width*0.84,canvas.width*0.5,canvas.width*0.01,0,Math.PI*2, false, false, true,false,0,0,"#fff",0, "#a0a0a0",1);
		//7.里大圆				
			var ga=cxt.createLinearGradient(375,80,375,620);
			ga.addColorStop(0,'#c8c8c9');
			ga.addColorStop(0.6,'#dedfe3');
			ga.addColorStop(1,'#fafafd');
			drawArc(canvas.width*0.49,canvas.width*0.5,canvas.width*0.246,0,Math.PI*2, false, false, true,true,-8,8,"#cfcfd0",18, ga,1);
			drawArc(canvas.width*0.49,canvas.width*0.5,canvas.width*0.246+1,0,Math.PI*2, false, false, false,true,-8,8,"#cfcfd0",18, "#afafaf",3);
		//8.中圆
			var middleArc=cxt.createLinearGradient(135,400,420,120);
			middleArc.addColorStop(0,'#0e38af');
			middleArc.addColorStop(1,'#1b71cf');
//			middleArc.addColorStop(0.,'#5ddff4');
			drawArc(canvas.width*0.49,canvas.width*0.5,canvas.width*0.215,0,Math.PI*2, false, false, true,false,0,0,"#fff",0, middleArc,1);
		//9小圆
			drawArc(canvas.width*0.49,canvas.width*0.5,canvas.width*0.16,0,Math.PI*2, false, false, true,true,3,4,"#090f5a",15, "#f9f8f8",1);
		//10.45%
			cxt.font = " 8rem Arial";
			cxt.shadowOffsetX=0;
			cxt.shadowOffsetY=0;
			cxt.shadowBlur=0;
			cxt.fillStyle="#aeaeb2";
			cxt.fillText("45%",canvas.width*0.36,canvas.width*0.55);
			cxt.font = " 8rem Arial";
			cxt.strokeStyle="#99999a";
			cxt.lineWidth=6;
			cxt.strokeText("45%",canvas.width*0.36,canvas.width*0.55);
//		11.生产，技术。。。。
			var tech=document.getElementById("technology").innerHTML="技术";
			var mainData=document.getElementById("mainData").innerHTML="采购";
			var project=document.getElementById("project").innerHTML="生产过程";
			var transportation=document.getElementById("transportation").innerHTML="运输安装";
			var gray=document.getElementById("gray").innerHTML="未开始";
			var red=document.getElementById("red").innerHTML="节点有异常";
			var blue=document.getElementById("blue").innerHTML="成功完成";
			var green=document.getElementById("green").innerHTML="进行中";
//      12.颜色注释
			drawRect(canvas.width*0.02,canvas.width*0.62,canvas.width*0.04,canvas.width*0.04,"#d7dada");
			drawRect(canvas.width*0.02,canvas.width*0.7,canvas.width*0.04,canvas.width*0.04,"#f04638");
			drawRect(canvas.width*0.75,canvas.width*0.62,canvas.width*0.04,canvas.width*0.04,"#2f9bf0");
			drawRect(canvas.width*0.75,canvas.width*0.7,canvas.width*0.04,canvas.width*0.04,"#19c5b0");
			
	}
	</script>

//效果如下图所示，可以适配不同大小的手机