HTML5 canvas 浅尝不止 < 1 > 画布变换与图像绘制

  HTML5 技术随着广大html5 粉儿 的发扬光大 逐渐开始在互连网，游戏等诸多方面崭露头角。其实提到，HTML5 大家 最熟悉的应该就是canvas 了，我最开始接触也是从localStorage，和canvas开始。这里我基础的介绍下 canvas 绘图里，有关画布 的变换 和 相应的图像绘制，太基础的知识，baidu 一下轻松找到，我就不赘述了。

  关于canvas 画布变换，主要有两个方式，一个是坐标变换 （.translate），还有就是 旋转变换 （.rotate）。

 

  先说一下，坐标变换。它可以将画布进行平移，从而完成一些复杂的绘画操作。

 

  一般的流程是

　　　　　 1.保存当前画布；（保存的话，有利于以后恢复，不用再进行平移了。当然再次平移也可以达到同样效果）

               2.translate，平移画布；

               3.在平移后的画布绘图；

               4.恢复画布，结束。

 

  上代码：

                

                //初始化 画布
                var myCanvas = document.getElementByIdx_x_x_x("main");
                g = myCanvas.getContext("2d");
                //保存当前画布
                g.save();
                //translate，平移画布 
                g.translate(100,100);
                //绘图
                g.fillStyle="#7A378B"; 
                g.fillRect(0, 0,100,100);
                //恢复画布
                g.restore();
                //绘制另一个
                g.fillStyle="red"; 
                g.fillRect(0, 0,100,100);

  

结果：

                 

 

  可以看到，实际结果是紫色方块绘制到了（100,100,100,100）的情况，而红色的是（0,0,100,100），即平移画布（100,100）的效果。如果，“g.restore();”被注释掉，那么红色方块会覆盖紫色的。

  

  再说 旋转变换 。它可以将画布进行旋转，来完成一些复杂的绘画操作，往往和 平移变换 同时使用。

 

  一般流程与平移基本相同，就是把平移变为旋转。

 

                var myCanvas = document.getElementByIdx_x_x_x("main"); 
                g = myCanvas.getContext("2d"); 
                //保存当前画布 
                g.save(); 
                //translate，平移画布 
                g.translate(-50,-50);
                //绘图 
                g.fillStyle="#7A378B"; 
                g.fillRect(0, 0,100,100);
                //rotate，旋转画布 ,右旋 90 度
                g.rotate( Math.asin(1) ); 
                //恢复画布 
                g.restore(); 
                //绘制另一个
                g.fillStyle="red"; 
                g.fillRect(200, 200,100,100);

 

 结果：

 

                 

 

  这里需要注意的是，旋转变换的旋转中心 ，一定是以原始画布的（0,0）作为中心的。在没有画旋转前，方块实际画到了（-50，-50,100,100），此时以（0,0）右转 90 度，结果如上图所示。

  

  在基于 canvas 复杂游戏的构建中，画布变换 是很重要的基础，要真正实现实体曲线运动等还需要结合相应的三角函数知识，进行实现，我将在接下来的博客中继续ing。