Geometrische Drehung der Schriftart Zeichen in Leinwand

Question

Ich habe diese codepen, und was ich tun möchte, ist jedes Zeichen auf seinem Mittelpunkt während der Übersetzung sanft zu drehen. Ich bin sehr neu in der Leinwand Welt und ich weiß nicht wirklich, wie man das erreicht.

versuchte ich so, aber sein scheint seltsam zu handeln:

Draw: function() { 
       //tried to add this line : 
       context.rotate(Math.PI/4); 

       context.font = this.size + "px FontAwesome"; 
       context.fillStyle = this.color; 
       context.strokeStyle = this.color; 
       if (this.id % 2 == 0) { 
        context.fillText(this.icon, this.x, this.y); 
       } else { 
        context.strokeText(this.icon, this.x, this.y); 
       } 
      } 

Irgendwelche Ideen? Ist es möglich, dass jedes Zeichen seine eigene Rotationsgeschwindigkeit hat?

Answer 1

Standardmäßig wird Text mit textAlign='start' und textBaseline='alphabetic' gezeichnet. So zeichnet fillText("g",20,50) Ihr einzelnes Zeichen linksbündig (bei x = 20) und ermöglicht, dass Unterlängen von Zeichen unter y = 50 fallen.

Wenn Sie Ihren Text um einen bestimmten [x, y] zentriert zeichnen möchten, können Sie textAlign und textBaseline einstellen.

// text will be horizontally centered around the specified x in filltext 
textAlign='center'; 

// text will be vertically centered around the specified y in filltext 
textBaseline='middle'; 

Um ein Zeichen zu drehen:

1. context.translate zum Zentrum x gewünscht, y.
2. context.rotate in den gewünschten Winkel.
3. context.fillText(yourCharacter,0,0), um das Zeichen auf der Leinwand zu zeichnen. Sie zeichnen bei 0,0, weil Sie den Ursprung bereits mit dem Befehl context.translate nach x, y verschoben haben.

Sie können requestAnimationFrame verwenden, um die Rotation Ihres Charakters zu animieren.

Setzen Sie den Code, der Ihr Zeichen in eine Funktion dreht: function rotateCharacter(). Senden Sie die erforderlichen Argumente zum Zentrieren und Drehen des Zeichens: character, centerX, centerY, radianAngle.

Dann eine andere Funktion erstellen, die Ihren Charakter Rotation beseelt: function animate()

Innerhalb der Animationsfunktion:

1. Klar die Leinwand: context.clearRect,
2. Rufen Sie die Drehfunktion des gedrehten Charakter zu zeichnen,
3. Aktualisiere den Rotationswinkel für den nächsten Animationsrahmen
4. Fordern Sie, dass die Animation fortgesetzt wird e: requestAnimationFrame

Hier ist Beispielcode und eine Demo:

// canvas vars 
 
var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
// set canvas text styling 
 
ctx.font='30px verdana'; 
 
ctx.textAlign='center'; 
 
ctx.textBaseline='middle'; 
 

 
// character vars 
 
var character='M'; 
 
var centerX=50; 
 
var centerY=50; 
 
var radianAngle=0; 
 

 
// start animating 
 
requestAnimationFrame(animate); 
 

 

 
function rotateCharacter(text,centerX,centerY,radianAngle){ 
 
    // translate to the centerpoint you desire to rotate around 
 
    ctx.translate(20,50); 
 
    // rotate by the desired angle 
 
    ctx.rotate(radianAngle); 
 
    // draw the text on the canvas 
 
    ctx.fillText('M',0,0); 
 
    // always clean up -- reset transformations to default 
 
    ctx.setTransform(1,0,0,1,0,0); 
 
} 
 

 
function animate(time){ 
 
    // clear the canvas 
 
    ctx.clearRect(0,0,cw,ch); 
 
    // draw the character rotated & centered at centerX,centerY 
 
    rotateCharacter(character,centerX,centerY,radianAngle); 
 
    // update the rotation angle for next time 
 
    radianAngle+=Math.PI/45; 
 
    // request another animation frame 
 
    requestAnimationFrame(animate); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid blue; margin:0 auto; }

<h4>A character rotating around a specified centerpoint</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>