HTML5canvas繪制圓形的方法-創(chuàng)新互聯(lián)

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

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

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

HTML5 canvas繪制圓形的方法

我們來直接看示例

代碼如下

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />

  <script type="text/javascript">
       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();

      }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

運行結(jié)果

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

HTML5 canvas繪制圓形的方法

最后說明一點

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

在上述的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();
    }

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

HTML5 canvas繪制圓形的方法

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

標題名稱：HTML5canvas繪制圓形的方法-創(chuàng)新互聯(lián)
標題URL：http://jinyejixie.com/article34/dpcpse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站設(shè)計、響應(yīng)式網(wǎng)站、Google、移動網(wǎng)站建設(shè)、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

HTML5canvas繪制圓形的方法-創(chuàng)新互聯(lián)