亚洲图片欧洲少妇熟女,午夜性刺激在线观看

扣丁學(xué)堂PHP培訓(xùn)詳解canvas多邊形(蜘蛛圖)的畫法示例

2019-09-16 11:17:30 4720瀏覽

canvas多邊形也就是我們常說的蜘蛛圖，在企業(yè)中是會經(jīng)常用到的，本篇文章扣丁學(xué)堂PHP培訓(xùn)小編就給讀者們分享一下canvas多邊形(蜘蛛圖)的畫法示例的相關(guān)資料，感興趣的小伙伴就來了解一下吧，希望對小伙伴們有幫助。

蜘蛛圖的畫法：

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

但是需要注意的是：canvas 標(biāo)簽本身是不具備繪圖功能，只能使用JavaScript在網(wǎng)頁上繪制圖像。

效果圖如下所示：

扣丁學(xué)堂PHP培訓(xùn)詳解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); //頂點連線
    drawText(mCtx); // 繪制文本
    drawRegion(mCtx);  // 繪制數(shù)據(jù)
    drawCircle(mCtx);  // 畫數(shù)據(jù)圓點
  })();

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

在蜘蛛圖中,我們可以進行拆分一下,通過畫六邊形,直線,圓圈的方式,分別進行完整個體的組件,然后通過方法進行統(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; //中心點
  var mRadius = mCenter - 100; //半徑(減去的值用于給繪制的文本留空間)
  var mAngle = Math.PI * 2 / mCount; //角度
  var mCtx = null;
  var mColorPolygon = '#B8B8B8'; //多邊形顏色
  var mColorLines = '#B8B8B8'; //頂點連線顏色
  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個圈
    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
  }

  //頂點連線
  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();
  }
  //畫點
  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)于PHP開發(fā)方面內(nèi)容的小伙伴，請關(guān)注扣丁學(xué)堂PHP培訓(xùn)官網(wǎng)、微信等平臺，扣丁學(xué)堂IT職業(yè)在線學(xué)習(xí)教育有專業(yè)的PHP講師為您指導(dǎo)，此外扣丁學(xué)堂老師精心推出的PHP視頻教程定能讓你快速掌握PHP從入門到精通開發(fā)實戰(zhàn)技能?？鄱W(xué)堂PHP技術(shù)交流群：374332265。

JavaEE/微服務(wù)/源碼解析/分布式/企業(yè)級架構(gòu)【VIP體驗課】

【關(guān)注微信公眾號獲取更多學(xué)習(xí)資料】【掃碼進入JavaEE/微服務(wù)VIP免費公開課】

標(biāo)簽: PHP培訓(xùn) PHP視頻教程 PHP在線視頻 PHP學(xué)習(xí)視頻 Laravel框架

上一篇扣丁學(xué)堂PHP培訓(xùn)詳解多個Laravel項目如何共用migrations 下一篇扣丁學(xué)堂php培訓(xùn)簡述在php的yii2框架中整合hbase庫的方法

欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

扣丁學(xué)堂PHP培訓(xùn)詳解canvas多邊形(蜘蛛圖)的畫法示例

熱門專區(qū)

課程推薦