Heim >Web-Frontend >H5-Tutorial >Beispiel für das Zeichnen von Canvas-Polygonen

Beispiel für das Zeichnen von Canvas-Polygonen

小云云Original: 2018-01-31 10:55:562675Durchsuche

In diesem Artikel werden hauptsächlich relevante Informationen zu Zeichenbeispielen für Leinwandpolygone (Spinnendiagramme) vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

So zeichnen Sie Spinnendiagramme:

Bevor wir beginnen, müssen wir wissen, wie Canvas Bilder zeichnet. Das Canvas-Element wird zum Zeichnen von Grafiken auf Webseiten verwendet. Das Canvas-Element von HTML5 verwendet JavaScript, um 2D-Bilder auf Webseiten zu zeichnen. Steuern Sie auf der Leinwand des rechteckigen Bereichs jedes Pixel und verwenden Sie JavaScript, um 2D-Grafiken zu zeichnen und sie Pixel für Pixel zu rendern. Es gibt viele Möglichkeiten, das Canvas-Element zum Zeichnen von Pfaden, Rechtecken, Kreisen und Zeichen zu verwenden und Bilder hinzuzufügen.

* Achtung! ! ! Das Canvas-Tag selbst verfügt über keine Zeichenfunktionen und kann nur JavaScript zum Zeichnen von Bildern auf Webseiten verwenden.

Das Rendering ist wie folgt:

1. Initialisierung des js-Codes

  //初始化
  (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);  // 画数据圆点
  })();

Im obigen Code werden alle Einstellungen durch eine Funktion zur sofortigen Ausführung initialisiert. Informationen zum Zeichnen eines regelmäßigen Sechsecks auf der Leinwand finden Sie unter Zeichnen eines regelmäßigen Sechsecks auf der Leinwand

Im Spinnendiagramm können wir es auf einmal teilen. Durch das Zeichnen von Sechsecken, geraden Linien und Kreisen werden vollständige Einzelkomponenten separat gezeichnet, und dann werden einheitliche Aufrufe durch Methoden

gezeichnet, wie unten gezeigt

Verwandte Empfehlungen:

<!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>

CSS3-Instanz zum Erstellen der Polygon-Clip-Eigenschaft

Leinwand zeichnet Polygone

Bestimmen Sie, ob ein Punkt innerhalb eines Polygons in MySQL_MySQL liegt

Das obige ist der detaillierte Inhalt vonBeispiel für das Zeichnen von Canvas-Polygonen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript mysql html5 css3 JS canvas

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5 Canvas-Implementierung der 360-Grad-Panorama-MethodeNächster Artikel：HTML5 Canvas-Implementierung der 360-Grad-Panorama-Methode

In Verbindung stehende Artikel

Mehr sehen