用canvas制作圆形

用canvas制作圆形画图步骤

步骤

1、开始创建路径
2、创建图形路径
3、创建完成关闭路径
4、设置绘制样式然后调用绘制方法进行绘制

核心代码

function draw(id){
	var canvas = document.getElementById(id);//获取元素
	var context = canvas.getContext('2d');//获取上下文
	context.fillStyle="beige";//填充颜色
	context.fillRect(0,0,400,400);
	
	for(var i = 0;i < 10;i++)
	{
		context.beginPath();//开始创建路径
		context.arc(i*25,i*25,i*10,0,Math.PI*2,true)//创建圆形路径
		context.closePath();//创建完成关闭路径
		context.fillStyle="rgba(255,0,0,0.25)"//设置样式
		context.fill()
// 		context.strokeRect="black";
// 		context.stroke();
	}
	
	
	
}

效果图