/*-----------------------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]-->
<!--[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 祈祷幸福博客原创,转载请注明。-------------------*/
- 大小: 3.6 KB
- 大小: 4.6 KB
- 大小: 5.8 KB
分享到:
相关推荐
该js由本人混合,将jquery.qrcode.min.js与excanvas.compiled.js完美结合,提供了IE8等低版本浏览器不兼容canvas控件生成二维码的解决方案。解决了jquery.qrcode.min.js使用table模式生成二维码时打印不显示的问题。...
配合html5.js使用,可以再低版本浏览器使用canvas进行绘图,支持IE6~8浏览器。
excanvas.compiled.js 兼容ie个版本浏览器插件,内涵excanvas和html5.js
NULL 博文链接:https://wj45.iteye.com/blog/692189
IE浏览器报错promise未定义,该js文件可以使IE浏览器兼容promise。excanvas.js使浏览器兼容HTML5 Canvas画布
Javascript 动态图形库 excanvas库 让IE支持canvas
excanvas.js jQuery 曲线绘制(图表)插件.excanvas 使得 IE 能通过 VML 支持 Canvas 标签
只需一个JS让万恶的IE5、IE6、IE7、IE8全都支持H5原生Canvas绘图
jsPdf.debug.js和html2canvas.js下载jsPdf.debug.js和html2canvas.js下载jsPdf.debug.js和html2canvas.js下载jsPdf.debug.js和html2canvas.js下载
canvas.text.js
excanvas_canvas.js_源码.zip
IE8添加canvas支持 ...<!--[if IE]> [removed][removed] <![endif]-->...下载excanvas_r3.zip,引用excanvas.compiled.js。 <!--[if IE]> [removed][removed] [removed][removed] <![endif]-->
解决在ie下的canvas兼容显示问题,特别是需哟兼容低版本的时候
做项目需要用到html2canvas.js和jspdf.debug.js找了好久才找的,先存放在这里如果大家需要也可以下。
让IE兼容 HTML5的canvas标签 excanvas的文件
excanvas_r3.zip解决了ie8不支持canvas的问题 excanvas_r3.zip解决了ie8不支持canvas的问题
html2canvas.js 和html2canvas.min.js 以及应用示例
Web开发canvas2image.js将canvas保存为图片,下载图片。