如何使用canvas畫出多邊形

如何使用canvas畫出多邊形？針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)建站專注于赤城網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠為您提供赤城營銷型網(wǎng)站建設(shè)，赤城網(wǎng)站制作、赤城網(wǎng)頁設(shè)計(jì)、赤城網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造赤城網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供赤城網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

蜘蛛圖的畫法:

在開始之前,我們需要知道canvas是如何進(jìn)行圖像的繪制,canvas 元素用于在網(wǎng)頁上繪制圖形。HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制2D圖像。在矩形區(qū)域的畫布上，控制其每一像素，JavaScript 來繪制 2D圖形，逐像素進(jìn)行渲染。可以通過多種方法使用canvas 元素繪制路徑、矩形、圓形、字符以及添加圖像。

* 注意！?。anvas 標(biāo)簽本身是不具備繪圖功能，只能使用 JavaScript 在網(wǎng)頁上繪制圖像。

效果圖如下所示:

如何使用canvas畫出多邊形

1. 初始化js代碼

  //初始化
  (function(){
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.height = mH;
    canvas.width = mW;
    mCtx = canvas.getContext('2d');
    drawPolygon(mCtx); // 繪制多邊形邊
    drawLines(mCtx); //頂點(diǎn)連線
    drawText(mCtx); // 繪制文本
    drawRegion(mCtx);  // 繪制數(shù)據(jù)
    drawCircle(mCtx);  // 畫數(shù)據(jù)圓點(diǎn)
  })();

上面代碼中,通過一個(gè)立即執(zhí)行函數(shù),進(jìn)行對所有的設(shè)置進(jìn)行初始化,對于canvas正六邊形的畫法,可參見canvas畫正六邊形

在蜘蛛圖中,我們可以進(jìn)行拆分一下,通過畫六邊形,直線,圓圈的方式,分別進(jìn)行完整個(gè)體的組件,然后通過方法進(jìn)行統(tǒng)一調(diào)用繪制

如下面所示源代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>蜘蛛圖canvas</title>
    <style type="text/css">
        canvas{
        }
    </style>
</head>
<body>
<script type="text/javascript">
  var mW = 400;
  var mH = 400;
  var mData = [['法力', 77],['防御', 72],['生命值', 46],['物理傷害', 50],['回復(fù)值', 80],['耐力', 60]];
  var mCount = mData.length; //邊數(shù)
  var mCenter = mW /2; //中心點(diǎn)
  var mRadius = mCenter - 100; //半徑(減去的值用于給繪制的文本留空間)
  var mAngle = Math.PI * 2 / mCount; //角度
  var mCtx = null;
  var mColorPolygon = '#B8B8B8'; //多邊形顏色
  var mColorLines = '#B8B8B8'; //頂點(diǎn)連線顏色
  var mColorText = '#000000';

  //初始化
  (function(){
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.height = mH;
    canvas.width = mW;
    mCtx = canvas.getContext('2d');

    drawPolygon(mCtx);
    drawLines(mCtx);
    drawText(mCtx);
    drawRegion(mCtx);
    drawCircle(mCtx);
  })();

  // 繪制多邊形邊
  function drawPolygon(ctx){
    ctx.save(); // save the default state

    ctx.strokeStyle = mColorPolygon;
    var r = mRadius/ mCount; //單位半徑
    //畫6個(gè)圈
    for(var i = 0; i < mCount; i ++){
      ctx.beginPath(); //開始路徑
      var currR = r * ( i + 1); //當(dāng)前半徑
      //畫6條邊
      for(var j = 0; j < mCount; j ++) {
        var x = mCenter + currR * Math.cos(mAngle * j);
        var y = mCenter + currR * Math.sin(mAngle * j);

        console.log('x:' + x, 'y:' + y);
        ctx.lineTo(x, y);
      }
      ctx.closePath();  //閉合路徑
      ctx.stroke();
    }

    ctx.restore(); // restore to the default state
  }

  //頂點(diǎn)連線
  function drawLines(ctx){
    ctx.save();

    ctx.beginPath();
    ctx.strokeStyle = mColorLines;

    for(var i = 0; i < mCount; i ++){
      var x = mCenter + mRadius * Math.cos(mAngle * i);
      var y = mCenter + mRadius * Math.sin(mAngle * i);

      ctx.moveTo(mCenter, mCenter);
      ctx.lineTo(x, y);
    }

    ctx.stroke();

    ctx.restore();
  }

  //繪制文本
  function drawText(ctx){
    ctx.save();

    var fontSize = mCenter / 12;
    ctx.font = fontSize + 'px Microsoft Yahei';
    ctx.fillStyle = mColorText;

    for(var i = 0; i < mCount; i ++){
      var x = mCenter + mRadius * Math.cos(mAngle * i);
      var y = mCenter + mRadius * Math.sin(mAngle * i);

      if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){
        ctx.fillText(mData[i][0], x, y + fontSize);
      }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){
        ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
      }else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){
        ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
      }else{
        ctx.fillText(mData[i][0], x, y);
      }

    }

    ctx.restore();
  }

  //繪制數(shù)據(jù)區(qū)域
  function drawRegion(ctx){
    ctx.save();

    ctx.beginPath();
    for(var i = 0; i < mCount; i ++){
      var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
      var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

      ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
    ctx.fill();

    ctx.restore();
  }
  //畫點(diǎn)
  function drawCircle(ctx){
    ctx.save();

    var r = mCenter / 18;
    for(var i = 0; i < mCount; i ++){
      var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
      var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
      ctx.fill();
    }

    ctx.restore();
  }
</script>
</body>
</html>

關(guān)于如何使用canvas畫出多邊形問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

文章名稱：如何使用canvas畫出多邊形
URL標(biāo)題：http://aaarwkj.com/article24/ggpije.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、做網(wǎng)站、響應(yīng)式網(wǎng)站、微信公眾號、服務(wù)器托管、網(wǎng)站內(nèi)鏈

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

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

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

如何使用canvas畫出多邊形