Erstellen Spirale in Alphanumeric mit Hilfe von Javascript

-1

ich eine Spirale durch Leinwand erstellen möchten aber in alphanumerischen ...Erstellen Spirale in Alphanumeric mit Hilfe von Javascript

genau wie der Code unten, aber in alphanumerischen ..

es bei A und Ende bei 0 beginnen ...

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

Quelle

2017-10-20 John Mark Capitle

Nizza. Aber das ist keine Frage. – Xufox

Ändern Sie 'cxt.lineTo (newX, newY);' und 'cxt.stroke();' in die richtigen Textanrufe und fügen Sie Ihren alphanumerischen Wert in diesen Aufruf ein. – Matt

Rotating und Text im Canvas-Objekt Zeichnung ist nicht die einfachste Sache zu tun Sie für jemanden, der es vorher nicht getan hat. Aber das heißt nicht, dass es schwer ist.

Der erste Teil zeichnet den Text, so Konvertierung starten wir cxt.lineTo(newX, newY) und 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; 
}

entfernen müssen hinzufügen Dies wird den Charakter a an jedem Kurvenpunkt setzen, dass die Spirale wurde mit , aber alle haben dieselbe Standard-Textrichtung. Um das zu beheben, müssen Sie die Zeichen drehen. Mit cxt.rotate() und Math.atan2() können Sie den Text für diesen Punkt im Kreis drehen. Unter Verwendung von cxt.save(), cxt.restore() und cxt.translate() müssen Sie die Maus nicht verdrehen oder mathematisch verwenden, um Ihre Zeichen richtig zu positionieren. Setzt man diese zusammen erhalten Sie:

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; 
}

Durch (0..2)*Math.PI der Drehung hinzugefügt haben, können Sie dann eine statische Drehung um die Zeichen hinzufügen, um sie alle nach innen Gesicht, oder alle zeigen nach außen, usw.

alle Hinzufügen zusammen mit einem Zähler und einer Charakterkarte können Sie die Spirale langsam in der Schriftgröße wachsen lassen und bekommen, was ich glaube, in etwa das ist, wonach Sie gesucht haben.

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

Quelle

2017-10-20 20:17:13

danke m8 ... !!! –

Entschuldigung .. Ich bin neu hier im Stackoverflow. Dank dafür.. :) –

Erstellen Spirale in Alphanumeric mit Hilfe von Javascript

Antwort

Verwandte Themen