HTML5(六)——Canvas 高级操作

y：添加到垂直坐标上的位置

设置之后开始绘制的图片位置从(x,y)算起。

eg：绘制两个一样的矩形，一个在平移前绘制，一个在平移后绘制，代码如下：

var canvas = document.getElementById(“canvas”)

var ctx = canvas.getContext(“2d”)

ctx.fillStyle=“red”

ctx.fillRect(0,0,200,200)

//平移

ctx.translate(200,200)

ctx.fillRect(0,0,200,200)

运行结果如图：

1.3 、rotate - 旋转

使用语法：rotate(angle)

angle 旋转弧度，如果想使用角度，可以把角度转成弧度，公式为：deg * Path.PI/180。

eg：将一个矩形旋转45度，代码如下：

var canvas = document.getElementById(“canvas”)

var ctx = canvas.getContext(“2d”)

//旋转45度

ctx.rotate(45*Math.PI/180)

ctx.fillStyle=“red”

ctx.fillRect(0,0,200,200)

运行结果如图：

根据上述结果我们发现旋转的时候，默认原点是画布的起始点，我们想要的旋转是在矩形框中心为原点的旋转，此时我们需要借助上translate平移，重置一下原点，修改上述代码为：

var canvas = document.getElementById(“canvas”)

var ctx = canvas.getContext(“2d”)

ctx.translate(200,200)

ctx.rotate(45*Math.PI/180)

ctx.translate(-200,-200)

ctx.f