Canvas 旋转、缩放、变形、移动

旋转 rotate

ctx.beginPath()
ctx.fillStyle="greenyellow"
ctx.fillRect(20,20,200,200)
ctx.rotate(0.25*Math.PI)
ctx.fillStyle="red"
ctx.fillRect(20,20,200,200)

缩放 scale

ctx.beginPath()
ctx.fillStyle="greenyellow"
ctx.fillRect(20,20,100,100)
ctx.scale(2,2)
ctx.fillRect(20,20,100,100)

变形 transform

ctx.beginPath()
ctx.fillStyle="greenyellow"
ctx.fillRect(20,20,200,100)
ctx.setTransform(2,0.5,-0.5,1,0,0);
ctx.beginPath()
ctx.fillStyle="red"
ctx.fillRect(20,20,200,100)

移动 translate

ctx.beginPath()
ctx.fillStyle="greenyellow"
ctx.fillRect(20,20,200,200)
ctx.translate(200,50)
ctx.fillStyle="red"
ctx.fillRect(20,20,200,200)