"朱哥！JavaScript这几天学的脑子都发热了，我怎么感觉越来越枯燥了！"小白一大早就向老朱抱怨道。
老朱：“对象这块知识是js自始至终永远离不开的内容，而类又是对象的抽象，所以你前期了解类的知识还是有必要的，不过我们不是还没有深入学习类么！”
小白：“还没有深入学习？”
老朱：“恩，其实还有一种终极类的继承模式我们没有说，前两天我们做的类的继承看上去功能实现了，但是每次实例化的时候都要重新执行一遍父类的构造函数，效率上还是差点，终极类继承就能完美解决这些问题，不过我们暂时先不讨论，等你js再熟悉一点我们再说，今天咱聊个有意思的功能——画布（canvas）。”
小白：“好啊！终于到画布了，早就听说HTML5新增了画布功能，到现在还没碰过它呢！”
“canvas就是一个绘图的容器，我们一样可以通过css对它进行样式控制。你看上面的布局显示效果如下。在画布上点右键可以看到，它就是一个图片。”
“别小看这一小小的canvas标签，它的功能强大到爆，它的核心功能就是位图重绘，它可以把一张图加载到内存中重新绘制到canvas中（注意不是插入，是重新绘制），也可以把一张图加载到内存中进行切片绘制。”
“比如这张我从网上随便搜的图片，通过canvas可以把这张图分成四个切片，按需绘制，网页游戏里面的任务场景等控制都是通过canvas重绘完成的。”
小白惊讶的说：“怪不得现在很多游戏可以在网页上直接玩，原来是canvas实现的啊！”
老朱：“恩，是啊，虽然现在还有很多flash制作的游戏，不过html5游戏占有率正在逐步增加。”
小白：“学会canvas就可以做游戏了么？赶紧教教我吧！”
老朱：“做游戏牵扯的功能太多了，等你把html5用的很熟的时候再想着去做游戏吧！现在能把canvas用在web前端应用中就已经很不错了。”
老朱接着说：“通过document.getElementById('mycanvas')可以拿到canvas对象，如果要在canvas上画图，我们可以使用getContext方法获取绘图对象。”
“ctx是一个CanvasRenderingContext2D对象，通过ctx我们可以设定绘图的填充色fillStyle、绘制图形fillRect等操作，具体ctx能够做哪些绘图操作我们后面会继续讨论，你有时间先自己看看它有哪些属性和方法。刚才的代码绘制出来的图形你看看结果”
“这个通过动态绘制的图片通过鼠标右键可以直接保存到本地！”
小白突然跳出来一句：“既然能在canvas中重绘图片，那是不是很多本地的图片我们先在canvas中重绘然后再上传到服务器就可以实现图片压缩呢？”
老朱：“哇！小白你现在思路很宽啊！确实可以，不但能压缩图片还能添加水印和裁剪，canvas了解以后我们就做一个图片上传的功能练练手。你先自己熟悉一下canvas标签相关的属性和方法吧！”
想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！
