這篇文章主要為大家展示了“html5如何使用canvas畫空心圓與實(shí)心圓”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“html5如何使用canvas畫空心圓與實(shí)心圓”這篇文章吧。

為企業(yè)提供網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、網(wǎng)站優(yōu)化、營銷型網(wǎng)站建設(shè)、競(jìng)價(jià)托管、品牌運(yùn)營等營銷獲客服務(wù)。成都創(chuàng)新互聯(lián)公司擁有網(wǎng)絡(luò)營銷運(yùn)營團(tuán)隊(duì)，以豐富的互聯(lián)網(wǎng)營銷經(jīng)驗(yàn)助力企業(yè)精準(zhǔn)獲客，真正落地解決中小企業(yè)營銷獲客難題，做到“讓獲客更簡(jiǎn)單”。自創(chuàng)立至今，成功用技術(shù)實(shí)力解決了企業(yè)“網(wǎng)站建設(shè)、網(wǎng)絡(luò)品牌塑造、網(wǎng)絡(luò)營銷”三大難題，同時(shí)降低了營銷成本，提高了有效客戶轉(zhuǎn)化率，獲得了眾多企業(yè)客戶的高度認(rèn)可！

代碼如下:

var canvas=document.getElementById("canvas");
    var cxt=canvas.getContext("2d");
    //畫一個(gè)空心圓
    cxt.beginPath();
    cxt.arc(200,200,50,0,360,false);
    cxt.lineWidth=5;
    cxt.strokeStyle="green";
    cxt.stroke();//畫空心圓
    cxt.closePath();
    //畫一個(gè)實(shí)心圓
    cxt.beginPath();
    cxt.arc(200,100,50,0,360,false);
    cxt.fillStyle="red";//填充顏色,默認(rèn)是黑色
    cxt.fill();//畫實(shí)心圓
    cxt.closePath();
    //空心和實(shí)心的組合
    cxt.beginPath();
    cxt.arc(300,300,50,0,360,false);
    cxt.fillStyle="red";
    cxt.fill();
    cxt.strokeStyle="green";
    cxt.stroke();
    cxt.closePath();

以上是“html5如何使用canvas畫空心圓與實(shí)心圓”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！