初学canvas,遇到width和height显示问题和用excanvas.js兼容IE问题
第一次认真写技术博客文~~~若有不严谨的地方,望指正。
今天是第一天认真开始学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
转自 http://qidaoxingfu.iteye.com/blog/1147566
初学canvas,遇到width和height显示问题和用excanvas.js兼容IE问题的更多相关文章
- H5 canvas的 width、height 与style中宽高的区别
Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...
- Canvas设置width与height 的问题!
最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...
- canvas基础入门(一)canvas的width、height于css样式中的宽高区别
canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...
- canvas的width和height设置问题
最近在学习canvas属性中遇到一个小问题,就是canvas的width和height设置问题 代码如下: <!DOCTYPE html> <html lang="en&q ...
- Canvas的width,height 和 样式中Canvas的width,height
控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ...
- 转:Canvas标签的width和height以及style.width和style.height的区别
转自:http://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html 作者:Artwl 背景 今天在博问中看到一个问题:用canvas 的 l ...
- 在canvas标签和style中定义width和height
在canvas标签中定义width.height跟在style中定义width.height是不同的.canvas标签的width和height是画布实际宽度和高度,就是在这个上面绘制图形.style ...
- 使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Th ...
- 如何在一个div标签里显示出另一个网页? <iframe src=" http://www.baidu.com " width="800px" height="200px" scrolling="no" frameborder="0"> </iframe>
如何在一个div标签里显示出另一个网页? 用在div里用iframe,就像下面的代码 <iframe src=" http://www.baidu.com " width=& ...
随机推荐
- Vuex核心知识(2.0)
Vuex 是一个专门为 Vue.js 应该程序开发的状态管理模式,它类似于 Redux 应用于 React 项目中,他们都是一种 Flux 架构.相比 Redux,Vuex 更简洁,学习成本更低.希望 ...
- Struts2系列笔记(2)---Struts.XML
Struts2.xml 本篇博客主要讲Struts2.xml中package下的标签和标签属性,主要分以下四个部分说明: (1)action的配置基本属性 (2)同一个Action类中不同方法满足不同 ...
- matlab 利用while循环计算平均值和方差
一.该程序是用来测输入数据的平均值和方差的 公式: 二. 项目流程: 1. State the problem假定所有测量数为正数或者0,计算这一系列测量数的平均值和方差.假定我们预先不知道有多少测量 ...
- 用9种办法解决 JS 闭包经典面试题之 for 循环取 i
2017-01-06 Tomson JavaScript 转自 https://segmentfault.com/a/1190000003818163 闭包 1.正确的说,应该是指一个闭包域,每当声明 ...
- 转:微信开发获取地理位置实例(java,非常详细,附工程源码)
微信开发获取地理位置实例(java,非常详细,附工程源码) 在本篇博客之前,博主已经写了4篇关于微信相关文章,其中三篇是本文基础: 1.微信开发之入门教程,该文章详细讲解了企业号体验号免费申请与一 ...
- C#属性和字段
属性 属性是一种用于访问对象或类的特性的成员.属性是字段的自然扩展,这两者都是具有关联类型的命名成员.而且访问字段和属性的语法是相同的.然而,与字段不同,属性不表示存储位置.相反属性具有访问器,这些访 ...
- Dynamics CRM 2015-Custom Workflow Activity
CRM的Workflow给我们的流程处理带来不少便利,但是这种自带的Workflow并不是万能的,中间某一step不能支持,往往会牵一发而动全身,可能造成整个Workflow Steps的重新设计.幸 ...
- 为什么使用enable_shared_from_this——shared_ptr两类错误
在使用C++实现弱回调时,订阅者应当维护一系列发布者的weak_ptr,而发布者注册回调时要传出this的shared_ptr指针,流行的实现方法是使用std::enable_shared_from_ ...
- jquery和javascript的区别(常用方法比较)
jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单.人家怎么说的来着,jquery就是要用更少的代码,漂亮的完成更多的功能.JavaScript 与JQu ...
- 【图像浏览】FastStone Image Viewer——快速、小巧、功能强大
FastStone Image Viewer 是一款免费(非商业用途)且小巧的看图软件. 其在在appinn.com的我最喜爱的<图片/照片浏览查看工具>调查结果中排第6名(总提名 140 ...