初学canvas，遇到width和height显示有关问题和用excanvas.js兼容IE有关问题
日期：2014-05-16 浏览次数：20386 次
初学canvas，遇到width和height显示问题和用excanvas.js兼容IE问题
第一次认真写技术博客文~~~若有不严谨的地方，望指正。
今天是第一天认真开始学canvas，书上网上写的还是蛮简单的，结果一写代码，遇到了一些细节细节问题，分享一下自己总结的吧。
问题一：内部样式表重置canvas的width和height，图形显示不正确
首先，canvas默认的width是150px，height是300px。不要小看这个简单的设置，我就栽了跟头：
我看的初学pdf是canvas tutorial，上面的例子代码是这样的：
学前端的都知道，内容和表现是要分离的，所以我就改了一下：
Javascript部分没有变。于是悲剧就酿成了：
这是我看到的样子：
而教程上说的是这个样子：
我搜了各种资料都无果，也看了API，fillRect(x, y, w, h)显然应该是个正方形。
最后，我把代码改得和原代码一样，就是说使用行内样式写宽高，现代浏览器除了IE都正常了（至于IE嘛，见下文）。
再次搜索，大概找到了问题：
搜索结果：http://topic.csdn.net/u/20110205/00/04e5481d-2a0b-4c17-b0c0-4e89da146926.html
canvas有自己的width和height属性，和css设置的还不是等同的，而至于行内样式和内部样式表为什么会不同，我水平有限，还不能给出解答，若你知道原因，可以交流下~~
为了稳妥起见，我觉得咱以后还是这样改宽高吧：
休息一下，再看问题二~:arrow:
问题二： 用excanvas.js兼容IE时，条件注释位置引起的显示问题
都知道IE9以下的版本是不支持html5的，更不要说canvas绘图了，所以，根据书上所说，我去下载了excanvas.js。
大家都知道，js很多时候都是放在body之后的，防止页面未加载完成就执行脚本。我个人习惯也是这样做，于是我理所当然得这样写了(片段代码)：
然后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]-->
<!-
/*-----------------------ITEYE 祈祷幸福博客原创，转载请注明。-------------------*/
第一次认真写技术博客文~~~若有不严谨的地方，望指正。
今天是第一天认真开始学canvas，书上网上写的还是蛮简单的，结果一写代码，遇到了一些细节细节问题，分享一下自己总结的吧。
问题一：内部样式表重置canvas的width和height，图形显示不正确
首先，canvas默认的width是150px，height是300px。不要小看这个简单的设置，我就栽了跟头：
我看的初学pdf是canvas tutorial，上面的例子代码是这样的：
<body>
<canvas id='tutorial' width='150px' height='150px'></canvas>
</body>
canvas{
border:2px solid #000;
margin:10px;
padding:10px;
color:red;
}
$(document).ready(function(){
draw();
});
function draw(){
var canvas = document.getElementById('tutorial');
if(canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 100, 100);
}
}
学前端的都知道，内容和表现是要分离的，所以我就改了一下：
<body>
<canvas id='tutorial'></canvas>
</body>
canvas{
width:150px;
height:150px;
border:2px solid #000;
margin:10px;
padding:10px;
color:red;
}
Javascript部分没有变。于是悲剧就酿成了：
这是我看到的样子：
而教程上说的是这个样子：
我搜了各种资料都无果，也看了API，fillRect(x, y, w, h)显然应该是个正方形。
最后，我把代码改得和原代码一样，就是说使用行内样式写宽高，现代浏览器除了IE都正常了（至于IE嘛，见下文）。
再次搜索，大概找到了问题：
搜索结果：http://topic.csdn.net/u/20110205/00/04e5481d-2a0b-4c17-b0c0-4e89da146926.html
canvas有自己的width和height属性，和css设置的还不是等同的，而至于行内样式和内部样式表为什么会不同，我水平有限，还不能给出解答，若你知道原因，可以交流下~~
为了稳妥起见，我觉得咱以后还是这样改宽高吧：
<body> <canvas id='tutorial'></canvas> </body>
$(document).ready(function(){
draw();
});
function draw(){
var canvas = document.getElementById('tutorial');
canvas.width = 150;
canvas.height = 150;
if(canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 100, 100);
}
}
休息一下，再看问题二~:arrow:
问题二： 用excanvas.js兼容IE时，条件注释位置引起的显示问题
都知道IE9以下的版本是不支持html5的，更不要说canvas绘图了，所以，根据书上所说，我去下载了excanvas.js。
大家都知道，js很多时候都是放在body之后的，防止页面未加载完成就执行脚本。我个人习惯也是这样做，于是我理所当然得这样写了(片段代码)：
<html>
<!--省略head代码-->
<body>
<canvas id='tutorial'></canvas>
</body>
<!--[if lt IE 9]>
<script src="excanvas.min.js" type="text/javascript"></script>
<![endif]-->
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
draw();
});
function draw(){
var canvas = document.getElementById('tutorial');
if(canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 100, 100);
}
}
</script>
</html>
然后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]-->
<!-
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
