其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结。但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了。我也有这种感觉,在学习的过程中,编写实例,用到了其中很多的属性和方法,但是回头来看的时候总觉得什么也没用。所以决定系统性的记录一下它常用到的API,方便以后查阅,也顺便造福一下大家。

另外:附一个之前学习的时候自己跟着教程写的一个小游戏:tinyHeart小游戏

开始之前

假设html代码中有一个canvas标签:

<canvas id="canvas">你的浏览器不支持canvas!</canvas>

如果你的浏览器是IE8及以下,那么很遗憾,上面那段文字会被渲染出来!而且下面的方法也都不能使用了;所以请使用支持canvas的浏览器来使用后面的方法。

//获取canvas容器var can = document.getElementById(‘canvas’);//创建一个画布var ctx = can.getContext(‘2d’);

另外我们可以还可以得到容器的宽和高度

var canWid = can.width;   //canvas 的宽度var canHei = can.height;   //canvas 的高度

延伸阅读

学习是年轻人改变自己的最好方式-Java培训,做最负责任的教育,学习改变命运,软件学习,再就业,大学生如何就业,帮大学生找到好工作,lphotoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训学习是年轻人改变自己的最好方式