这已经是第四篇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&#