<!DOCTYPE HTML>
<html>
<head>
<title>translate()</title>
<script type="text/javascript">
function draw(){
var cxt = document.getElementById("myCanvas").getContext("2d");
cxt.fillRect(0,0,300,300);
for (i=0; i<3; i++)
{
for (j=0; j<3; j++)
{
cxt.save();
cxt.strokeStyle="#9CFF00";
cxt.translate(50+j*100,50+i*100);
drawSpirograph(cxt,20*(j+2)/(j+1),-8*(i+3)/(i+1),10);
cxt.restore();
}
}
}
function drawSpirograph(cxt,R,r,O){
var x1 = R-O;
var y1 = 0;
var i = 1;
cxt.beginPath();
cxt.moveTo(x1,y1);
do{
if (i>20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
cxt.lineTo(x2,y2);
x1 = x2;
y1 = y2;
i++;
}while (x2 !=R-O && y2 != 0);
cxt.stroke();
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" height="300" width="300"">
</canvas>
</body>
</html>
显示效果如下：
【translate 方法用来移动 canvas 和它的原点到一个不同的位置。translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量。实例中显示出移动 canvas 原点的好处。我们创建了一个 drawSpirograph 方法用来绘制螺旋（spirograph）图案，图案是围绕原点绘制出来的。如果不使用 translate 方法，那么只能看见其中的四分之一。translate 可以帮助我们任意放置这些图案，而不需要在 spirograph 方法中手工调整坐标值，既好理解也方便使用。实例在 draw 方法中调用 drawSpirograph 方法 9 次，用了 2 层循环。每一次循环，先移动 canvas ，画螺旋图案，然后恢复早原始状态。】【在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。又，如果你是在一个循环中做位移但没有保存和恢复 canvas 的状态，很可能到最后会发现怎么有些东西不见了，那是因为它很可能已经超出 canvas 范围以外了。】