H5 canvas基础入门到捕鱼达人小游戏实现(4)canvas事件处理和图形动作

这已经是第四篇canvas文章了，今天主要讲canvas中图形动作和canvas中的事件

图形动作

常用动作api：平移，缩放，旋转

平移

var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
gd.translate(100,100);//x,y平移到的位置
gd.fillRect(0,0,100,100);//绘制一个正方形

看看示例图

如果我想在一块画布中移动两个块呢看看代码

var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');

    gd.beginPath();
    gd.translate(100,100);
    gd.fillRect(0,0,100,100);

    gd.fillStyle = "red";
    gd.translate(100,100);
    gd.fillRect(0,0,100,100);

按照代码分析：先移动100,100创建一个块，再移动100,100,在创建一个红色的块。
如图所示：

可以看到，第二次移动是基于第一次移动的效果叠加的，第二个块相当于移动到了200,200的位置了。
这样状态就非常不好管理了，因为都是叠加上去的，那么有这么一个api可以使得画布保存一个状态，当我们第一次移动完之后，在恢复这个状态，在进行第二次移动，就互相不影响了
看看代码：

    var oC = document.getElementById('c1&#