Canvas 旋转、缩放、变形、移动
旋转 rotate
js
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
js
ctx.beginPath()
ctx.fillStyle="greenyellow"
ctx.fillRect(20,20,100,100)
ctx.scale(2,2)
ctx.fillRect(20,20,100,100)变形 transform
js
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
js
ctx.beginPath()
ctx.fillStyle="greenyellow"
ctx.fillRect(20,20,200,200)
ctx.translate(200,50)
ctx.fillStyle="red"
ctx.fillRect(20,20,200,200)