canvas translate

静下心来，开始接触一下HTML5吧，要不然以后连套页面都不会了。:)

在看手册的时候，canvas画布是一项很强大的东西。类似于WEBQQ的动态背景之类的就不说了，咱是菜鸟，从头学。

先来看一下canvas中的坐标原点，及正、负坐标的取值

那就先试着画一个“米”字吧，高手莫笑！

<canvas id="diagonal" style="border: 1px solid blue;"width="200" height="200">

<scripttype="text/javascript">
    var canvas =document.getElementById_x('diagonal');
    //指定绘制的类型为2d，并返回其绘画环境
    var context =canvas.getContext('2d');
    context.moveTo(200, 0);
    context.lineTo(0, 200);
   
    context.moveTo(0, 0);
    context.lineTo(200,200);
   
    context.moveTo(0,100);
   context.lineTo(200,100);
   
    context.moveTo(100,0);
   context.lineTo(100,200);
   
    context.stroke();
</script>

默认的原点坐标是0,0 那么，我们在画图的时候是否可以指定新的原点坐标呢？of course!

我们可以在更改默认原点之前先对context执行save()方法，相当于做一个标记

使用context的translate()方法，可以指定新的原点坐标，后续的moveTo和lineTo的坐标值都是相对于新的原点坐标来操作取值

使用context的restore()方法，可以回到默认的原点坐标去

例如，可以使用下面的方法重新画一个“米”字

       <canvas id="diagonal" style="border: 1px solid blue;"width="200" height="200"></canvas>
       <script type="text/javascript">
           var canvas= document.getElementById_x('diagonal');
           varcontext = canvas.getContext('2d');
          context.save();
          context.translate(200,0);
           //这个0,0其实是200，0
          context.moveTo(0,0);
          context.lineTo(-200,200);
          context.moveTo(-200,0);
          context.lineTo(0,200);
          context.moveTo(-100,0);
          context.lineTo(-100,200);
          context.moveTo(-200,100);
          context.lineTo(0,100);
          context.stroke();
       </script>

或者，画到一半，我们把原点坐标返回到0，0 可以这样做：

       <canvas id="diagonal" style="border: 1px solid blue;"width="200" height="200"></canvas>
       <script type="text/javascript">
           var canvas= document.getElementById_x('diagonal');
           varcontext = canvas.getContext('2d');
          context.save();
          context.translate(200,0);
          context.moveTo(0,0);
          context.lineTo(-200,200);
          context.moveTo(-200,0);
          context.lineTo(0,200);
          context.restore();
          //这时候的100,0是真正相对于原来的0，0时的100，0
          context.moveTo(100,0);
          context.lineTo(100,200);
          context.moveTo(0,100);
          context.lineTo(200,100);
          context.stroke();
       </script>