canvas: 探究rotate()函数

在Nicholas的《JS》高级程序设计中是这样描述描述canvas的rotate()API的。

rotate(angle):围绕原点旋转图像angle弧度

首先注意angle参数的单位是弧度

我刚看到这个API的描述时认为：这是要把画布上已经画好的内容，旋转angle弧度吗，实则不然。首先让我们看下面这段代码

 "drawing" width="200px" height="200px">
script type="text/javascript">
    var drawing=document.getElementById("drawing");
    if(drawing.getContext){
        var context=drawing.getContext("2d");
        context.beginPath();
        context.arc(100,100,99,0,2*Math.PI,false);
        context.moveTo(194,100);
        context.arc(100,100,94,0,2*Math.PI,false);
        context.translate(100,100);
        context.moveTo(0,0);
        context.lineTo(0,-85);
        context.moveTo(0,0);
        context.lineTo(-65,0);
        context.rotate(1);
        context.stroke();
    }

结果如下

尽管我们使用了rotate()函数，但是没有发生旋转，这是为什么呢？

这是因为，虽然rotate函数可以表现出旋转的效果，但是本质上是通过旋转坐标系（不旋转画布上的内容）实现的。所以在画好内容后，旋转坐标系，不能对原有内容产生作用。

正确的代码应该是这样的：

"drawing" width="200px" height="200px">

在画内容之前就旋转坐标系的话，就可以实现旋转的效果

这是rotate()这个API可能会让人觉得迷惑的点。所以说专业书的译者的水平也很重要啊。