キャンバスオブジェクトをその中心点ではなく、ボトム点の周りで回転させる方法はありますか

Question

私はhtmlを使ってゲームを作っていますが、キャンバスオブジェクトを回転させて中心点として四角形の底を回転させる必要があります。これがrotateメソッドによって可能かどうか不明です。どのようにこの作品を得るための任意のアイデアですか？ありがとう。これは、長方形の創造の最初の2つのパラメータとしなければならなかった

function drawRotatedRect(x, y, width, height, degrees, color) { 
    context.save(); 
    context.beginPath(); 
    context.translate(x + width/2, y + height/2); 
    context.rotate(degrees*Math.PI/180); 
    context.rect(-width/2, -height/2, width, height); 
    context.fillStyle = color; 
    context.fill(); 
    context.restore();} 

Answer 1

は、あなたがにbeginPathを使用する必要があると、あなたはfillRectかにstrokeRectを使用することができます矩形の塗りつぶしていない

Answer 2

を解決しました。また、トランスフォームを設定すると、遅い保存および復元機能を避けることができます。 setTransformのみを使用すると、クリッピング以外の目的で保存と復元を使用する必要はありません。

コードのクイックバージョンです。

// where centerX and centerY is where the rotation point is on the rectange  
function drawRotatedRect(x, y, width, height, centerX, centerY, rotation, color) { 
    context.setTransform(1, 0, 0, 1, x, y); 
    context.rotate(rotation); 
    context.fillStyle = color; 
    context.fillRect(-centerX, -centerY, width, height); 
    context.setTransform(1, 0, 0, 1, 0, 0); // restore default Only needed if 
              // you transform not using setTransform 
              // after this call 
}