html5 平移,Html5 canvas绘图旋转和平移

Html5canvs允许平移和旋转绘图，我们来看下面的代码，：

平移和旋转

var

ctx;

function init(){

ctx=document.getElementByIdx_x("canvas").getContext("2d");

ctx.fillStyle="rgb(250,0,0)";

ctx.fillRect(50,50,100,200);

ctx.fillStyle="rgb(0,0,250)";

ctx.fillRect(50,50,5,5);

}

http-equiv="Content-Type" content="text/html;

charset=utf-8">

onLoad="init();">

id="canvas" width="400" height="300">

结果如图所示

我们绘制了一个很大的红色矩形，左上角坐标(50，50)，另外还在这个矩形上面绘制一个小的蓝色正方形，我们是以蓝色小正方形所在的左上角为支点旋转这个大矩形的，逆时针旋转，我们制定逆时针旋转30度，编码为Math.PI/6.

我们修改前面的代码来完成这个旋转，我加入了旋转，然后绘制红色矩形，再反向旋转(这点有点奇怪，实际上起到了取消旋转的作用，回复原来的状态)，再绘制蓝色正方形：

function init(){

ctx=document.getElementByIdx_x("canvas").getContext("2d");

ctx.fillStyle="rgb(250,0,0)";

ctx.rotate(-Math.PI/6);

ctx.fillRect(50,50,100,200);

ctx.fillStyle="rgb(0,0,250)";

ctx.rotate(Math.PI/6);

ctx.fillRect(50,50,5,5);

}

遗憾的是，这并不是我们要的结果，如图：

为什么会这样呢？问题在于旋转点是在原点(0，0)，而不是红矩形的左上角。所以哦我们需要先完成一个平移，把旋转的原点移动到蓝色矩形的坐标，以蓝色矩形为原点来旋转，当旋转完成后再平移回去完成后面的绘图。画布上所有的绘制都是基于一个坐标系完成的，我们可以使用

save和restore操作保存当前的坐标系(即轴的位置和方向)，然后回复到原来的坐标完成后续的工作.代码如下：

function init(){

ctx=document.getElementByIdx_x("canvas").getContext("2d");

ctx.fillStyle="rgb(250,0,0)";

ctx.save();

ctx.translate(50,50);

ctx.rotate(-Math.PI/6);

ctx.translate(-50,-50);

ctx.fillRect(50,50,100,200);

ctx.restore();

ctx.fillStyle="rgb(0,0,250)";

ctx.fillRect(50,50,5,5);

}

效果如图：

这样我们就完成了一个正确的旋转，rotate方法需要一个弧度单位的角度，负数为逆时针。