ホームページ >ウェブフロントエンド >H5 チュートリアル >キャンバスポリゴンの描画例

キャンバスポリゴンの描画例

小云云オリジナル: 2018-01-31 10:55:562674ブラウズ

この記事は主にキャンバスポリゴン（スパイダーダイアグラム）の描画例に関する情報を紹介しています。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

スパイダーダイアグラムの描画方法:

始める前に、canvas 要素が Web ページにグラフィックを描画するために使用されることを知る必要があります。 HTML5 の Canvas 要素は、JavaScript を使用して Web ページ上に 2D 画像を描画します。長方形領域のキャンバス上で、各ピクセルを制御し、JavaScript を使用して 2D グラフィックを描画し、ピクセルごとにレンダリングします。 Canvas 要素を使用してパス、長方形、円、文字を描画したり、画像を追加したりする方法は数多くあります。

* 注意! ！！ Canvas タグ自体には描画機能はなく、JavaScript を使用して Web ページ上に画像を描画することしかできません。

レンダリングは次のとおりです:

1. jsコードを初期化します

  //初始化
  (function(){
    var canvas = document.createElement(&#39;canvas&#39;);
    document.body.appendChild(canvas);
    canvas.height = mH;
    canvas.width = mW;
    mCtx = canvas.getContext(&#39;2d&#39;);
    drawPolygon(mCtx); // 绘制多边形边
    drawLines(mCtx); //顶点连线
    drawText(mCtx); // 绘制文本
    drawRegion(mCtx);  // 绘制数据
    drawCircle(mCtx);  // 画数据圆点
  })();

上記のコードでは、キャンバス上の正六角形の描画方法について、すべての設定が即時実行関数によって初期化されます。キャンバスを参照して正六角形を描画します

スパイダーダイアグラムでは、六角形、直線、円を完全な個別のコンポーネントに分割して描画し、メソッドを通じて呼び出して均一に描画できます

以下に示すように、ソースコード:

<!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 = [[&#39;法力&#39;, 77],[&#39;防御&#39;, 72],[&#39;生命值&#39;, 46],[&#39;物理伤害&#39;, 50],[&#39;回复值&#39;, 80],[&#39;耐力&#39;, 60]];
  var mCount = mData.length; //边数
  var mCenter = mW /2; //中心点
  var mRadius = mCenter - 100; //半径(减去的值用于给绘制的文本留空间)
  var mAngle = Math.PI * 2 / mCount; //角度
  var mCtx = null;
  var mColorPolygon = &#39;#B8B8B8&#39;; //多边形颜色
  var mColorLines = &#39;#B8B8B8&#39;; //顶点连线颜色
  var mColorText = &#39;#000000&#39;;

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

    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); //当前半径
      //画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(&#39;x:&#39; + x, &#39;y:&#39; + 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 + &#39;px Microsoft Yahei&#39;;
    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();
  }

  //绘制数据区域
  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 = &#39;rgba(255, 0, 0, 0.5)&#39;;
    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 = &#39;rgba(255, 0, 0, 0.8)&#39;;
      ctx.fill();
    }

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

キャンバスポリゴンの描画例

関連記事