99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

小編給大家分享一下HTML5 canvas繪制圓形的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)從2013年成立，公司以成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、系統(tǒng)開發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計(jì)等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶超過千家，涉及國內(nèi)多個(gè)省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗(yàn)。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計(jì)、宣傳推廣等服務(wù)。 通過專業(yè)的設(shè)計(jì)、獨(dú)特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。

canvas能用于繪制各種圖形，那么如何使用HTML5 canvas繪制一個(gè)圓形呢？

我們來直接看示例

代碼如下

  
  
  

  


  
  
Canvas Demo

運(yùn)行結(jié)果

瀏覽器上執(zhí)行上述HTML文件。將會(huì)顯示如下效果

最后說明一點(diǎn)

arc()方法給出的圓的坐標(biāo)是圓的中心坐標(biāo)。

在上述的HTML代碼中，將繪圖部分設(shè)為下面的代碼。

function draw() {
    var canvas = document.getElementById('SimpleCanvas');
    if ( ! canvas || ! canvas.getContext ) {
          return false;
    }
    var cx = 360;    
    var cy = 400;    
    var radius = 36;
    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(cx, cy, radius, 0, 2 * Math.PI, false);
    context.fillStyle = '#9fd9ef';
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = '#00477d';
    context.stroke(); 
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(cx, cy);
    context.stroke();
    }

上述代碼的顯示效果如下，可以看到中心坐標(biāo)是圓的中心。

以上是HTML5 canvas繪制圓形的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

文章題目：HTML5canvas繪制圓形的方法-創(chuàng)新互聯(lián)
標(biāo)題來源：http://www.ef60e0e.cn/article/dpcpse.html