Blog

今天即将启程回家过年，但心情甚好，写下本周学习心得之HTML5 canvas ,大家也许都知道HTML5规范引进了很多新特性，其中最令人期待的之一就是canvas元素。HTML5 canvas提供了通过JavaScript绘制图形的方法，此方法使用简单但功能强大。每一个canvas元素都有一个"上下文( context )" (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个canvas上下文，并通过不同的API提供图形绘制功能。 使用canvas并不难，只要你具有HTML和 JavaScript的基础知识，并使用新版本浏览器（IE9、Opera 9、Firefox 1.5、Konqueror和最近版本的Safari）即可看到效果。好了，不多说了，眼见为实咯，下面通过几个准备工作开始我们今天的学习，最终看能不能得到相应的效果。 1.HTML5文档格式 2.canvas元素的定义 因为 相对较新，有些浏览器并没实现，如Firefox 1.0 和 Internet Explorer，所以我们需要为那些不支持canvas的浏览器提供替用显示内容。我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容，而支持的浏览器则会正常地渲染canvas。例如，我们可以把一些文字或图片填入canvas内，作为替用内容： 3.通过javascript来控制和显示canvas的效果 4.查看最终效果 将以上的代码复制下来运行看看，能不能得到想要的效果。