Wie zeichne ich einen Kreis mit Leinwand? Drei dynamische Implementierungsmethoden zum Zeichnen von Kreisen mithilfe von Canvas-H5-Tutorial-php.cn

Wie zeichne ich einen Kreis mit Leinwand? Drei dynamische Implementierungsmethoden zum Zeichnen von Kreisen mithilfe von Canvas

不言

Freigeben： 2018-09-15 13:42:47

Original

11294 Leute haben es durchsucht

Wir alle sollten wissen, dass man mit Canvas verschiedene Bilder im Browser zeichnen kann. Wie zeichnet man also mit Canvas einen Kreis? In diesem Artikel werden drei dynamische Implementierungsmethoden für die Verwendung von Canvas zum Zeichnen eines Kreises vorgestellt.

Schauen wir uns zunächst die erste Methode zum Zeichnen eines Kreises auf der Leinwand an: Verwenden der arc()-Methode der Leinwand, um dynamisch einen Kreis zu zeichnen

arc() Methode zum Erstellen eines Bogens/einer Kurve (zum Erstellen von Kreisen oder Teilkreisen).

Idee: Begrenzen Sie es, indem Sie den Startwinkel und den Endwinkel festlegen, und erzielen Sie dann den Animationseffekt, indem Sie temporäre Winkelvariablen akkumulieren.

Syntax: context.arc(x,y,r,sAngle,eAngle,gegen den Uhrzeigersinn);

Implementierungscode für das Zeichnen von Leinwandkreisen:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{
        margin: 0 auto;
        display: block;
    }
    </style>
</head>
<body>
  <canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>
  <script type="text/javascript">
  //方法一：arc 动态画圆
  var c = document.getElementById(&#39;myCanvas&#39;);
  var ctx = c.getContext(&#39;2d&#39;);
  var mW = c.width = 300;
  var mH = c.height = 300;
  var lineWidth = 5;
  var r = mW / 2; //中间位置
  var cR = r - 4 * lineWidth; //圆半径
  var startAngle = -(1 / 2 * Math.PI); //开始角度
  var endAngle = startAngle + 2 * Math.PI; //结束角度
  var xAngle = 1 * (Math.PI / 180); //偏移角度量
  var fontSize = 35; //字号大小
  var tmpAngle = startAngle; //临时角度变量
  //渲染函数
  var rander = function(){
    if(tmpAngle >= endAngle){
      return;
    }else if(tmpAngle + xAngle > endAngle){
      tmpAngle = endAngle;
    }else{
      tmpAngle += xAngle;
    }
    ctx.clearRect(0, 0, mW, mH);
    //画圈
    ctx.beginPath();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = &#39;#1c86d1&#39;;
    ctx.arc(r, r, cR, startAngle, tmpAngle);
    ctx.stroke();
    ctx.closePath();
    //写字
    ctx.fillStyle = &#39;#1d89d5&#39;;
    ctx.font= fontSize + &#39;px Microsoft Yahei&#39;;
    ctx.textAlign=&#39;center&#39;;
    ctx.fillText( Math.round((tmpAngle -  startAngle) / (endAngle - startAngle) * 100) + &#39;%&#39;, r, r + fontSize / 2);
    requestAnimationFrame(rander);
  };
  rander();
  </script>
</body>
</html>

Nach dem Login kopieren

Der Effekt des Zeichnens eines Kreises auf Leinwand:

Als nächstes werfen wir einen Blick auf die zweite Methode von Zeichnen eines Kreises auf der Leinwand Methode : Verwenden Sie die Canvas-Rotate()-Methode, um einen Kreis zu zeichnen.

Rotate()-Methode, um die aktuelle Zeichnung zu drehen.

Idee: Definieren Sie die Punktkoordinaten neu als (0, 0) und führen Sie dann eine Einzelpunktzeichnung durch, indem Sie die Grafik innerhalb des angegebenen Bereichs drehen.

Syntax: context.translate(x,y);

Der Implementierungscode des Canvas-Zeichenkreises:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{  
          margin: 0 auto;        
          display: block;    
          }
    </style></head><body>
  <canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>
  <script type="text/javascript">
  //方法二：rotate() 动态画圆
  var c = document.getElementById(&#39;myCanvas&#39;);  
  var ctx = c.getContext(&#39;2d&#39;);  
  var mW = c.width = 300;  
  var mH = c.height = 300;  
  var lineWidth = 5;  
  var r = mW / 2; //中间位置
  var cR = r - 4 * lineWidth; //圆半径
  var startAngle = -(1 / 2 * Math.PI); //开始角度
  var endAngle = startAngle + 2 * Math.PI; //结束角度
  var xAngle = 1 * (Math.PI / 180); //偏移角度量
  var fontSize = 35; //字号大小
  var tmpAngle = startAngle; //临时角度变量
  //渲染函数
  var rander = function(){
    if(tmpAngle >= endAngle){     
     return;
    }else if(tmpAngle + xAngle > endAngle){
      tmpAngle = endAngle;
    }else{
      tmpAngle += xAngle;
    }
    ctx.clearRect(0, 0, mW, mH);    //画圈
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = &#39;#1c86d1&#39;;
    ctx.translate(r, r); //重定义圆点
    ctx.rotate(-Math.PI); //最上方为起点
    for(var i = 0; i <= tmpAngle - startAngle; i += xAngle){ //绘图
      ctx.moveTo(0, cR - lineWidth);
      ctx.lineTo(0, cR);
      ctx.rotate(xAngle); //通过旋转角度和画点的方式绘制圆
    }
    ctx.stroke();
    ctx.closePath();
    ctx.restore();    //写字
    ctx.fillStyle = &#39;#1d89d5&#39;;
    ctx.font= fontSize + &#39;px Microsoft Yahei&#39;;
    ctx.textAlign=&#39;center&#39;;
    ctx.fillText( Math.round((tmpAngle -  startAngle) / (endAngle - startAngle) * 100) + &#39;%&#39;, r, r + fontSize / 2);
    requestAnimationFrame(rander);
  };
  rander();  
  </script>
  </body>
  </html>

Nach dem Login kopieren

Das Rendering des Canvas-Zeichenkreises:

Schließlich schauen wir uns die dritte Methode zum Zeichnen eines Kreises auf Leinwand an: Verwenden Sie Get Kreis Zeichnen eines Kreises mithilfe von Koordinaten

Idee: Verwenden Sie sin() und cos(), um die Koordinatenposition zwischen dem Startwinkel und dem Endwinkel entsprechend einem bestimmten Winkelversatz in einem Array zu speichern und dann Folgen Sie dem Array. Die Koordinatenpunkte in werden gezeichnet.

Der Implementierungscode des Leinwand-Zeichenkreises:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{     
       margin: 0 auto;        
       display: block;    
       }
    </style></head><body>
  <canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>

  <script type="text/javascript">
  //方法三：获取圆坐标方式 动态画圆
  var c = document.getElementById(&#39;myCanvas&#39;);  
  var ctx = c.getContext(&#39;2d&#39;);  
  var mW = c.width = 300;  
  var mH = c.height = 300;  
  var lineWidth = 5;  
  var r = mW / 2; //中间位置
  var cR = r - 4 * lineWidth; //圆半径
  var startAngle = -(1 / 2 * Math.PI); //开始角度
  var endAngle = startAngle + 2 * Math.PI; //结束角度
  var xAngle = 2 * (Math.PI / 180); //偏移角度量
  var cArr = []; //圆坐标数组
  //初始化圆坐标数组
  for(var i = startAngle; i <= endAngle; i += xAngle){    
  //通过sin()和cos()获取每个角度对应的坐标
    var x = r + cR * Math.cos(i);    
    var y = r + cR * Math.sin(i);
    cArr.push([x, y]);
  }  //移动到开始点
  var startPoint = cArr.shift();
  ctx.beginPath();
  ctx.moveTo(startPoint[0], startPoint[1]);  //渲染函数
  var rander = function(){
    //画圈
    if(cArr.length){
      ctx.lineWidth = lineWidth;
      ctx.strokeStyle = &#39;#1c86d1&#39;;    
      var tmpPoint = cArr.shift();
      ctx.lineTo(tmpPoint[0], tmpPoint[1]);
      ctx.stroke();      
    }else{
      cArr = null;      
      return;
    }
    requestAnimationFrame(rander);
  };
  rander();  
  </script>
  </body>
  </html>

Nach dem Login kopieren

Das Rendering des Leinwand-Zeichenkreises:

Die oben genannten Artikel sind drei Implementierungsmethoden für die Verwendung von Canvas zum Zeichnen von Kreisen, und der Endeffekt ist derselbe Weitere Informationen zu Canvas finden Sie im HTML5-Entwicklungshandbuch.

Das obige ist der detaillierte Inhalt vonWie zeichne ich einen Kreis mit Leinwand? Drei dynamische Implementierungsmethoden zum Zeichnen von Kreisen mithilfe von Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!