Maison >interface Web >Tutoriel H5 >Exemple de dessin de polygones de toile

Exemple de dessin de polygones de toile

小云云original: 2018-01-31 10:55:562675parcourir

Cet article présente principalement des informations pertinentes sur les exemples de dessins de polygones sur toile (diagramme en araignée). L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Comment dessiner des diagrammes en araignée :

Avant de commencer, nous devons savoir comment Canvas dessine des images. L'élément Canvas est utilisé pour dessiner des graphiques sur des pages Web. L'élément canevas de HTML5 utilise JavaScript pour dessiner des images 2D sur des pages Web. Sur le canevas de la zone rectangulaire, contrôlez chaque pixel et utilisez JavaScript pour dessiner des graphiques 2D et les restituer pixel par pixel. Il existe de nombreuses façons d'utiliser l'élément canvas pour dessiner des chemins, des rectangles, des cercles, des personnages et ajouter des images.

*Attention ! ! ! La balise canvas elle-même n'a pas de fonctions de dessin et ne peut utiliser que JavaScript pour dessiner des images sur des pages Web.

Le rendu est le suivant :

1. Code js d'initialisation

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

Dans le code ci-dessus, tous les paramètres sont initialisés via une fonction d'exécution immédiate. Pour savoir comment dessiner un hexagone régulier sur une toile, voir Dessiner un hexagone régulier sur une toile

Dans le graphique en araignée, nous pouvons le diviser en une seule fois, en dessinant des hexagones, des lignes droites et des cercles, des composants individuels complets sont dessinés séparément, puis des appels unifiés sont dessinés via les méthodes

comme indiqué ci-dessous :

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

Recommandations associées :

Instance CSS3 de création d'une propriété de clip de polygone

le canevas dessine un polygone

Déterminer si un point appartient à un polygone dans MySQL_MySQL

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript mysql html5 css3 JS canvas

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Implémentation HTML5 Canvas de la méthode de panorama à 360 degrésArticle suivant：Implémentation HTML5 Canvas de la méthode de panorama à 360 degrés

Articles Liés

Voir plus