キャンバスでのフォント文字の幾何学的な回転

Question

私はこれをcodepenとしました。私がしたいのは、翻訳中にその中心点の各フォント文字をスムーズに回転させることです。私はキャンバスの世界には非常に新しいので、私はそれを達成する方法を本当に知らない。

私はこのようにしようとしたが、その奇妙に行動するようだ：

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

任意のアイデア？各キャラクターが独自の回転速度を持つことも可能ですか？

Answer 1

デフォルトでは、テキストはtextAlign='start'とtextBaseline='alphabetic'で描画されます。したがって、fillText("g",20,50)はあなたの1文字を左に（x = 20で）引っ張り、キャラクターのディセンダーをy = 50以下に落とすことができます。

指定した[x、y]にテキストを描画する場合は、textAlignとtextBaselineと設定できます。所望の中心のx、yに

1. context.translate：文字を回転させる

   // 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'; 
   

   。

2. context.rotate希望する角度に設定します。
3. context.fillText(yourCharacter,0,0)キャンバスに文字を描画します。 context.translateコマンドで原点をすでにx、yに移動しているので、0,0で描画します。

requestAnimationFrameを使用して、キャラクタの回転をアニメーションできます。

文字を回転させるコードを関数に入れます：function rotateCharacter()。キャラクターを中心に合わせて回転させるために必要な議論を送ってください：character、centerX、centerY、radianAngle 、回転文字を描画するために、

コール回転機能をcontext.clearRect：

1. クリアキャンバス：アニメーション関数内function animate()

   ：

   次に、あなたのキャラクターの回転をアニメーション化する別の関数を作成します

2. 次のアニメーションフレームの回転角度を更新する
3. アニメーションを継続するように依頼するE：​​

ここではサンプルコードやデモです：

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