H5canvas 1：画圆

版权声明：本文纯属原创，未经同意请勿转载。 https://blog.csdn.net/beiluo77/article/details/88353195

H5canvas画圆

    今天整理了一下自己的文档，发现之前学的canvas还挺好玩的。
首先是canvas画圆：
它的html代码和CSS代码很简单

<h2>Canvas——画圆</h2>
<canvas id="myCanvas" width="400" height="300"></canvas>

body{
	text-align: center;
	}
#myCanvas{
	border: 1px solid #000;
	}

打好框架之后就可以写js文件了。

var c=document.getElementById("myCanvas");  ///获取画布id为myCanvas
var ctx=c.getContext("2d"); //获取绘图2D环境
var w=c.width;
var h=c.height;
ctx.strokeStyle="#ff0000";  //线段颜色
ctx.lineWidth=5;
ctx.arc(w/2,h/2,100,0,2*Math.PI,true); //创建弧/曲线（用于创建圆形或部分圆）
ctx.stroke();  //画直线

这个就是最简单的圆形了。

如果要画同心圆，多个圆环套在一起，可以用循环实现

window.function(){
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	var w=c.width;
	var h=c.height;
	ctx.strokeStyle="#ff0000";//返回笔触的颜色
	ctx.lineWidth=2;
	for(r=60;r<=140;r+=20)
	{			
		ctx.beginPath();//起始路径
		ctx.arc(w/2,h/2,r,0,2*Math.PI,true);//创建弧或曲线
		ctx.stroke();//绘制已定义的路径
	}
}

或者是渐变的同心圆：

window.function(){
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	var w=c.width;
	var h=c.height;	
	ctx.lineWidth=2;
	for(r=1;r<=6;r++)
	{			
		ctx.beginPath();//起始路径
		ctx.fillStyle="rgba(0,50,200,"+r/9+")";//返回填充的颜色
		ctx.arc(w/2,h/2,160-r*15,0,2*Math.PI,true);//创建弧或曲线
		ctx.fill();//填充颜色
	}
}

画圆比较简单，稍微改动一下小细节就能做出好看的效果！