這里給大家分享的是一個學習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();

總結

以上是生活随笔為你收集整理的html5 实心圆点,html5使用canvas画空心圆与实心圆的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。