canvas讲解进阶篇一

html5中最强大的武器当属canvas莫属。从文字处理到电子游戏，canvas都会提供给你而且总体而言运行速度相当快，而且编码良好的canvas应用程序无需修改即可在任何兼容html5浏览器中进行运行。

偶尔因为canvas更新而浏览器版本跟不上导致细微差别。而针对低版本ie的兼容我们过会儿再说。

我们先从canvas基本开始走起：

实现canvas首先要在页面中定义一个canvas元素，该元素与普通页面元素无差别<canvas></canvas>即可，在不定义其宽高时候默认宽高是300*150个像素。

而我们可以在元素上进行修改其默认宽高如下：<canvas id="canvas" width="600" height="400" style="solid thin #aaa"></canvas>大家可能注意到其中的width以及height值后面没有跟px像素，

这是canvas规范所要求的，其规范规定宽高的值是数字类型，所以我们遵循规范即可。有的同学可能认为页面与样式应该分离，其实分离未尝不可，只是如果进行分离时候canvas宽高默认的300*150像素会保持在绘图环境中，

而你在css中定义的canvas元素的宽高只是定义canvas元素宽高，实际绘图环境还是不会改变的，这样一来我们画出来的东西可能跟我们初衷效果会不一样，这点需要注意，所以我们尽量不在css中定义宽高，

但是可以定义其他canvas样式 例如边框大小样式等。

因为canvas是基于html5而来，html5尚有一些ie低版本浏览器不支持，更何况canvas，不过canvas在不支持canvas的浏览器中进行默认兼容，即：如果你的浏览器不支持canvas那么显示以下p标签内容：

<canvas id='canvas' width="600" height="400" style="border thin #aaa"><p>亲，你的浏览器不支持canvas，该更新浏览器版本了</p></canvas>

当然其中的p标签你可以根据业务需要换成图片或者任何其他浏览器可以识别的元素来供用户浏览。然后我们可以跟其他js写法一样新建一个js文件或者在html页面书写js代码：

<script type="text/javascript">

window.οnlοad=function(){

var canvas=document.getElementById('canvas'),

context=canvas.getContext("2d");

}

</script>

我们在加载页面完成之后（在此为了之后为ie低版本做兼容才在页面加载后执行canvas）首先得到对canvas的引用，然后利用canvas建立一个2d环境的绘图对象context，之后我们就可以利用context来实现我们想要的文