使用JavaScript

-1

我想通过画布，但在字母创建一个螺旋，以数字创建螺旋...使用JavaScript

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

将在开始和结束时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; \t \t 
 
     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>

来源

2017-10-20 John Mark Capitle

尼斯。但这不是一个问题。 – Xufox

将'cxt.lineTo（newX，newY）;'和'cxt.stroke（）;'改为正确的文本调用，并在所述调用中插入字母数字值。 – Matt

旋转，并在Canvas对象绘制文本是不是最容易的事情为以前没有做过的人做。但这并不意味着这很难。

第一部分是绘制文本，所以要开始转换，我们必须删除cxt.lineTo(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; 
}

添加cxt.fillText(char, newX, newY)这将使字符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); 
    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; \t \t 
 
     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>

来源

2017-10-20 20:17:13

谢谢m8 ... !!! –

对不起。我在这里新的在stackoverflow。感谢那.. ：） –

回答

相关问题