translate

图形位移 translate(x,y);
<canvas id="canvas-1" width="300" height="300" style="border: 1px solid #333;"></canvas>

<script>
var canvas = document.getElementById("canvas-1");
var ctx = canvas.getContext('2d');
ctx.translate(100,100);      //将图像坐标移动到 100,100 位置
ctx.fillStyle = "#ff0000";   //先设置颜色
ctx.fillRect(50,50,50,50);   // translate 的坐标上在定位,并画图像
</script>

rotate

旋转角度 rotate(deg * Math.PI / 180);
<canvas id="canvas-2" width="300" height="300" style="border: 1px solid #333;"></canvas>

<script>
var canvas = document.getElementById("canvas-2");
var ctx = canvas.getContext('2d');
ctx.rotate(10 * Math.PI / 180);    //将图像旋转 10deg
ctx.fillStyle = "#ff0000";        
ctx.fillRect(100,50,50,50);       
</script>

scale

放大缩小  scale(2,2)
该缩放会同时对 x,y 的坐标也进行缩放
<canvas id="canvas-3" width="300" height="300" style="border: 1px solid #333;"></canvas>

<script>
var canvas = document.getElementById("canvas-3");
var ctx = canvas.getContext('2d');
ctx.scale(2,2);             //将图像 x,y 变大 2 
ctx.fillStyle = "#ff0000";
ctx.fillRect(0,0,50,50);
</script>