canvas的arc绘制弧形

1.绘制弧形

context.arc(
    centerx, centery, radius,//圆点坐标和半径
    startingAngle,endingAngle,//起始弧度,结束弧度
    anticlockwise = false//默认顺时针,绘制路径的方式很重要,因为fill会根据非零环绕原则来进行填充,可以达到剪纸等效果
)

startingAngle和endingAngle对应的图

canvas的arc绘制弧形_第1张图片

eg:





    
    
    
    canvas画弧形



    浏览器不支持canvas,请更换浏览器
    


运行结果:

canvas的arc绘制弧形_第2张图片

2.beginPath()和closePath()不用成对出现。

beginPath()代表重新规划一个路径;

closePath()代表要结束当前的路径,如果当前路径没封闭,会自动封闭当前路径,如果不想要封闭,则使用beginPath()就好了,不用使用closePath()。

closePath()对fill()不起作用。因为fill()也会自动封闭当前路径,然后填充。

你可能感兴趣的:(html5)