Creating Spiral in Alphanumeric using javascript
Question
I want to create a spiral through canvas but in alphanumeric...
just like the code below but in alphanumeric..
it will start at A and end at 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>1 answers
solution1
0 ACCPTED 2017-10-20 20:17:13
Rotating and drawing text in the Canvas object isn't the easiest thing to do for someone who hasn't done it before. But that doesn't mean that it's hard.
The first part is drawing the text , so to start conversion we have to remove cxt.lineTo(newX, newY) and add cxt.fillText(char, newX, newY) in
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;
}
This will put the character a at every curve-point that the spiral was using, but they all face the same default text direction. So to fix that you must rotate the characters. Using cxt.rotate() and Math.atan2() you can rotate the text for that point in the circle. Using cxt.save() , cxt.restore() , and cxt.translate() you won't have to unrotate or use math to position your characters properly. Putting these together you get:
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;
}
By adding (0..2)*Math.PI to the rotation, you can then add a static rotation to the characters, making them all face inwards, or all face outwards, etc.
Adding all of this together, along with a counter and a character map, you can make the spiral slowly grow in font size and get what I believe is roughly what you were looking for.
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.