如何利用canvas画一个圆，并且填充颜色

如何利用canvas画一个圆，并且填充颜色（小白专用，大佬勿看）

canvas基础

相信在此之前，你对canvas已经有一定的了解了，接下来我将介绍，如何利用canvas画一个圆。

1、新建一个html模板，我用的编辑环境是Visual Studio Code：

2、在body里面创建一个canvas标签，也就是设置一块画布：

    
    
    


  
        当前浏览器不支持 canvas
    

3、再编辑js：

    
    
    


    
        当前浏览器不支持 canvas
    

3、效果图：

4-1、填充一个颜色，加上：

//3.绘制
ctx.beginPath();//开始绘制
ctx.arc(95,50,40,0,2*Math.PI);//arc 的意思是“弧”
ctx.fillStyle="#ff0";//设置填充颜色
ctx.fill();//开始填充
ctx.strokeStyle="blue";//将线条颜色设置为蓝色
ctx.stroke();//stroke() 方法默认颜色是黑色（如果没有上面一行，则会是黑色）。

4-2.填充颜色后的效果：

5、难点讲解，相信小白看了之后，对ctx.arc(100,100,80,0,2*Math.PI);这里有点不解。可以看W3school的介绍一看就懂