初学canvas,遇到width和height显示问题和用excanvas.js兼容IE问题
/*-----------------------ITEYE 祈祷幸福博客原创,转载请注明。-------------------*/
第一次认真写技术博客文~~~若有不严谨的地方,望指正。
今天是第一天认真开始学canvas,书上网上写的还是蛮简单的,结果一写代码,遇到了一些细节细节问题,分享一下自己总结的吧。
问题一:内部样式表重置canvas的width和height,图形显示不正确
首先,canvas默认的width是150px,height是300px。不要小看这个简单的设置,我就栽了跟头:
我看的初学pdf是canvas tutorial,上面的例子代码是这样的:

然后IE果断杯具了,没有显示出画布。
我以为是excanvas.js还不够强大,于是自作多情加了个html5.js,发现还是不行。然后搜了一篇文章,写的是html5.js要放在head里面,不然之后的html5标签无法辨认。
于是,我也试着把excanvas.js放在head里。显示正确。
注意下:以上的IE显示正确是在宽高用js函数来更改的情况下。
如果你是用问题一所说的行内样式更改的宽高,虽然非IE的现代浏览器显示正常,但是IE下显示结果是这样的:
ps、本人测的是IE8。
IE里面的canvas宽高还是默认的。
所以,综合来看,以后还是不要在样式表里面乱改canvas的宽和高,不然会酿成各种杯具。
PS、期间偶有点忘记条件注释砸写了,搜索的时候发现网上有两种写法,运行时候发现第二种是不可行的,建议写的时候注意一下。
<!--[if lt IE 9]><![endif]-->
<!--[if lt IE9]><![endif]-->
参考手册:
canvas在线手册图片版(HTML5 Canvas Cheat Sheet v1.x):http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png
本人看的pdf在线版:http://www.docin.com/p-136387127.html
/*-----------------------ITEYE 祈祷幸福博客原创,转载请注明。-------------------*/