使用 javascript 创建字母数字螺旋

Question

我想通过 canvas 创建一个螺旋线，但是在字母数字...

就像下面的代码，但在字母数字中..

它将从 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，您可以为角色添加静态旋转，使其全部面向内，或全部面向外等

将所有这些加在一起，连同一个计数器和一个字符映射表，您可以使螺旋线的字体大小缓慢增长，并且我认为大致就是您要查找的内容。

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

使用 javascript 创建字母数字螺旋

Creating Spiral in Alphanumeric using javascript

javascript

spiral