小編給大家分享一下html5使用canvas畫空心圓與實心圓的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、網(wǎng)站建設、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務政和,10年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575

這里給大家分享的是一個學習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使用canvas畫空心圓與實心圓的方法有了一定的了解，想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！