各コンテキストをJavaScriptで回転

Question

image = new Image(); 
image.src = 'assets/img/image.png'; 
for (var i = 0; i < this.bombs.length; i++) { 
    var bomb = this.bombs[i]; 
    ctx.drawImage(image, bomb.x - 2, bomb.y - 2, 15, 8); 

} 

これはキャンバスゲームのイメージで、上から下に落ちています。しかし、私は、イメージが各状態をランダムに回転させるようにしたい。

私はこれを試してみました：

function drawRotated(degrees){ 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.save(); 
    ctx.translate(canvas.width/2,canvas.height/2); 
    ctx.rotate(degrees*Math.PI/180); 
    ctx.drawImage(image,-image.width/2,-image.width/2); 
    ctx.restore(); 
} 

は私のイメージでは、この機能が追加されましたが、その作業はありません。どうしたらいいですか？

Answer 1

あなたは正しい軌道に乗っています！ 1つ（またはそれ以上）の画像を回転させる

：

1. あなたは画像を中心としたい中心点に変換します。所望の角度
2. によって
3. 回転画像
4. を描画変換（&回転を変換元に戻す）を元に戻します。

変更のカップル：キャンバスの中央に

• あなたは常にtranslate。爆弾を降下させたい場合は、ますますキャンバスを翻訳する必要があります。

• A型：drawImageには、&高さ引数の両方にwidthが使用されています。

• 効率：context.save and context.restoreは、&がすべてのキャンバススタイルを復元するため、より高価な操作です。代わりに、それはcontext.setTransform(1,0,0,1,0,0)

でのみお使いの変換（回転、平行移動）をリセットする方が効率的だここで、これらの変更のためのリファクタリング、コードです：

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

 
var bomb; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/danger.png"; 
 
function start(){ 
 
    var aa=img.width*img.width; 
 
    var bb=img.height*img.height; 
 
    var cc=Math.sqrt(aa+bb); 
 
    bomb={ 
 
     x:150,y:-img.height/2, 
 
     degrees:0,image:img, 
 
     maxRotatedHalfHeight:cc/2 
 
    }; 
 
    requestAnimationFrame(animate); 
 
} 
 

 
function drawRotated(b){ 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 
    ctx.save(); 
 
    ctx.translate(b.x,b.y); 
 
    ctx.rotate(b.degrees*Math.PI/180); 
 
    ctx.drawImage(b.image,-b.image.width/2,-b.image.height/2); 
 
    ctx.restore(); 
 
} 
 

 
function animate(time){ 
 
    drawRotated(bomb); 
 
    bomb.y+=1; 
 
    bomb.degrees+=1; 
 
    if(bomb.y<=canvas.height+bomb.maxRotatedHalfHeight){ 
 
     requestAnimationFrame(animate); 
 
    }else{ 
 
      alert('Animation is complete.'); 
 
    } 
 
}

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

<canvas id="canvas" width=300 height=175></canvas>