html5图片动且平移,HTML5 Canvas平移，放缩，旋转演示

HTML5 Canvas中提供了实现图形平移，旋转，放缩的API。

平移(translate)

平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y)，原来的(0,0)坐标则变成(-x, -y)

图示如下：

任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移

点坐标translate(x, y)。

代码演示：

// translate is move the startpoint to centera and back to top left corner

functionrenderText(width, height, context) {

context.translate(width/ 2, height / 2); //中心点坐标为(0, 0)

context.font="18px Arial";

context.fillStyle="blue";

context.fillText("Please Press to Exit Game",5,50);

context.translate(-width/2,-height/2); //平移恢复(0,0)坐标为左上角

context.fillText("I'm Back to Top",5,50);

}<