圍繞其中心點旋轉影象或路徑

下面的步驟#1-5 允許任何影象或路徑形狀在畫布上的任何位置移動並旋轉到任何角度，而不更改任何影象/路徑形狀的原始點座標。

1. 將畫布[0,0]原點移動到形狀的中心點

   context.translate( shapeCenterX, shapeCenterY );
   

2. 以所需角度旋轉畫布（以弧度表示）

   context.rotate( radianAngle );
   

3. 將畫布原點移回左上角

    context.translate( -shapeCenterX, -shapeCenterY );
   

4. 使用原始座標繪製影象或路徑形狀。

    context.fillRect( shapeX, shapeY, shapeWidth, shapeHeight );
   

5. 一直清理！ 將轉換狀態設定回#1 之前的狀態

• 步驟#5，選項#1： 以相反的順序撤消每個轉換

     // undo #3
     context.translate( shapeCenterX, shapeCenterY );
     // undo #2
     context.rotate( -radianAngle );
     // undo #1
     context.translate( -shapeCenterX, shapeCenterY );
  

• 步驟#5，選項#2： 如果畫布在開始步驟#1 之前處於未轉換狀態（預設），則可以通過將所有轉換重置為其預設狀態來撤消步驟#1-3 的效果

     // set transformation to the default state (==no transformation applied)
     context.setTransform(1,0,0,1,0,0)
  

示例程式碼演示：

// canvas references & canvas styling
var canvas=document.createElement("canvas");
canvas.style.border='1px solid red';
document.body.appendChild(canvas);
canvas.width=378;
canvas.height=256;
var ctx=canvas.getContext("2d");
ctx.fillStyle='green';
ctx.globalAlpha=0.35;        

// define a rectangle to rotate
var rect={ x:100, y:100, width:175, height:50 };

// draw the rectangle unrotated
ctx.fillRect( rect.x, rect.y, rect.width, rect.height );

// draw the rectangle rotated by 45 degrees (==PI/4 radians)
ctx.translate( rect.x+rect.width/2, rect.y+rect.height/2 );
ctx.rotate( Math.PI/4 );
ctx.translate( -rect.x-rect.width/2, -rect.y-rect.height/2 );
ctx.fillRect( rect.x, rect.y, rect.width, rect.height );