Question

我想通过画布创建一个螺旋形但是用字母数字......

就像下面的代码一样，但是使用字母数字..

它将从A开始并以0结束......

   <!DOCTYPE HTML>
    <html><body>
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;"></canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        var centerX = 150;
        var centerY = 150;
        cxt.moveTo(centerX, centerY);
    
        var gap = 1.8; // increase this for spacing between spiral lines        
        var STEPS_PER_ROTATION = 60; // increasing this makes the curve smoother
    
        var increment = 2*Math.PI/STEPS_PER_ROTATION;		
        var theta = increment;
        while( theta < 20*Math.PI) {
           var newX = centerX + theta * Math.cos(theta) * gap; 
           var newY = centerY + theta * Math.sin(theta) * gap; 
           cxt.lineTo(newX, newY);
           theta = theta + increment;
        }
        cxt.stroke(); // draw the spiral
    </script></body></html>

Answer 1

在Canvas对象中旋转和绘制文本对于之前没有完成它的人来说并不是最容易做到的事情。但这并不意味着它很难。

第一部分是绘制文字，所以要开始转换，我们必须删除cxt.lineTo(newX, newY)并在

中添加cxt.fillText(char, newX, newY)

while(theta < 20*Math.PI) {
   var newX = centerX + theta * Math.cos(theta) * gap; 
   var newY = centerY + theta * Math.sin(theta) * gap; 
   //cxt.lineTo(newX, newY);
   cxt.fillText('a', newX, newY);
   theta = theta + increment;
}

这会将字符a放在螺旋所使用的每个曲线点上，但它们都面向相同的默认文本方向。所以要解决这个问题，你必须旋转字符。使用cxt.rotate()和Math.atan2()，您可以旋转圆圈中该点的文字。使用cxt.save()，cxt.restore()和cxt.translate()，您无需取消旋转或使用数学来正确定位角色。把这些放在一起你得到：

while( theta < 20*Math.PI) {
   var newX = centerX + theta * Math.cos(theta) * gap; 
   var newY = centerY + theta * Math.sin(theta) * gap;
   cxt.save()
   cxt.translate(newX, newY);
   cxt.rotate(Math.atan2(centerY - newY, centerX - newX)); 
   cxt.fillText('a', 0, 0);
   cxt.restore();
   theta = theta + increment;
}

通过在旋转中添加(0..2)*Math.PI，您可以为角色添加静态旋转，使其全部朝向内部，或者全部朝外等等。

将所有这些加在一起，连同计数器和角色地图，你可以让螺旋线逐渐增大字体大小，并得到我认为大致正是你所寻找的东西。

＆＃13;

<!DOCTYPE html>
<html>
  <body>
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;"></canvas>
    <script type="text/javascript">
      var c=document.getElementById("myCanvas");
      var cxt=c.getContext("2d");
      var centerX = 150;
      var centerY = 150;
      cxt.moveTo(centerX, centerY);
      
      var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'.split(''); // character map for spiral
      var gap = 3; // increase this for spacing between spiral lines        
      var rotation = 0; // value between 0..1 that rotates the characters 0..360 degrees.
      var spread = 1; // increasing this makes the spread more
      var spirals = 10; // number of spirals
      var STEPS_PER_ROTATION = 60; // increasing this adds more characters
      
      var increment = spread*2*Math.PI/STEPS_PER_ROTATION;		
      var theta = increment;
      var maxFont = 16;
      cxt.font = '0px sans';
      cxt.textBaseline = 'center';
      let spiralCount = 2*spirals*Math.PI;
      let char = 0;
      while(theta < spiralCount) {
         var newX = centerX + theta * Math.cos(theta) * gap;
         var newY = centerY + theta * Math.sin(theta) * gap;
         var rot = Math.atan2(newY - centerY, newX - centerX);
         cxt.save();
         cxt.translate(newX, newY);
         cxt.rotate(rot + (rotation*2*Math.PI));
         cxt.font = (maxFont*(theta/spiralCount)) + 'px sans';
         cxt.fillText(characters[char], 0, 0);
         cxt.restore();
         theta = theta + increment;
         char++;
         if (char > characters.length - 1) char = 0;
      }
      cxt.stroke(); // draw the spiral
    </script>
  </body>
</html>

＆＃13;

使用javascript在字母数字中创建螺旋

1 个答案: