canvas画圆

雨点打透心脏的1/2处 2021-07-24 16:22 599阅读 0赞

### 画圆方法说明 ###

arc(x, y, radius, startAngle, endAngle, anticlockwise)  
该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。  
这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

### 实例1 ###

window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		//从150,150的位置为圆心，50为半径，画一个从0-2π的圆
    		ctx.arc(150,150,50,0,2*Math.PI);
    		ctx.stroke();
    	}

画了一个圆

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

### 实例2 ###

window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		
    		var dis=60;
    		//平移x方向，画5个圆
    		for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30,20,0,2*Math.PI);
    			ctx.closePath();
    			ctx.stroke();
    		}
    	}

连续的画5个圆

![20210114165648100.png][]

### 实例3 ###

需要注意的是 closePath 会将没有闭合的圆弧闭合

### 实例4 ###

//平移Y方向，画5个圆
    		for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30+dis*n,20,0,2*Math.PI/(i+1) ,true);
    			//ctx.closePath();
    			ctx.stroke();
    		}

arc函数的最后一个函数设置为true，与之前默认的对面可以和明显的看出区别

![20210114170404369.png][]

### 实例5 ###

for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30+dis*n,20,0,2*Math.PI/(i+1) ,true);
    			//ctx.closePath();
    			ctx.fill();
    		}

fill会填充为实心的，并且会自动闭合

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

### 完整代码实例 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/69bc82c1b2f04c65afad8206e9e3b89c.png
[20210114165648100.png]: /images/20210724/70c3eb2276fc49d68d8f46e2e10476cc.png
[20210114170404369.png]: /images/20210724/26b4458d28c34606a3cf382f33c3ba35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/3c776ef4382d459395302fa170de3b05.png