html5如何使用canvas画空心圆与实心圆

这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题，非常简单。

canvas id="canvas" width="500" height="500" style="background-color: yellow;
    ">
    /canvas>
    

VAR canvas=document.getElementById("canvas");
         var cxt=canvas.getContext("2d");
         //画一个空心圆     cxt.beginPath();
         cxt.arc(200,200,50,0,360,false);
         cxt.lineWidth=5;
         cxt.strokeStyle="green";
         cxt.stroke();
    //画空心圆     cxt.closePath();
         //画一个实心圆     cxt.beginPath();
         cxt.arc(200,100,50,0,360,false);
         cxt.fillStyle="red";
    //填充颜色,默认是黑色     cxt.fill();
    //画实心圆     cxt.closePath();
         //空心和实心的组合     cxt.beginPath();
         cxt.arc(300,300,50,0,360,false);
         cxt.fillStyle="red";
         cxt.fill();
         cxt.strokeStyle="green";
         cxt.stroke();
         cxt.closePath();
    

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于canvas线条的属性

如何使用HTML5 canvas实现雪花飘落

以上就是html5如何使用canvas画空心圆与实心圆的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！