用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();
}
}
效果图