/*-----------------------ITEYE 祈祷幸福博客原创，转载请注明。-------------------*/

第一次认真写技术博客文~~~若有不严谨的地方，望指正。

今天是第一天认真开始学canvas，书上网上写的还是蛮简单的，结果一写代码，遇到了一些细节细节问题，分享一下自己总结的吧。

问题一：内部样式表重置canvas的width和height，图形显示不正确 
首先，canvas默认的width是150px，height是300px。不要小看这个简单的设置，我就栽了跟头： 
我看的初学pdf是canvas tutorial，上面的例子代码是这样的：

  1. <body>
  2. <canvas id='tutorial' width='150px' height='150px'></canvas>
  3. </body>
  1. canvas{
  2. border:2px solid #000;
  3. margin:10px;
  4. padding:10px;
  5. color:red;
  6. }
  1. $(document).ready(function(){
  2. draw();
  3. });
  4. function draw(){
  5. var canvas = document.getElementById('tutorial');
  6. if(canvas.getContext){
  7. var ctx = canvas.getContext('2d');
  8. ctx.fillRect(25, 25, 100, 100);
  9. }
  10. }

学前端的都知道，内容和表现是要分离的，所以我就改了一下：

  1. <body>
  2. <canvas id='tutorial'></canvas>
  3. </body>
  1. canvas{
  2. width:150px;
  3. height:150px;
  4. border:2px solid #000;
  5. margin:10px;
  6. padding:10px;
  7. color:red;
  8. }

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设置的还不是等同的，而至于行内样式和内部样式表为什么会不同，我水平有限，还不能给出解答，若你知道原因，可以交流下~~

为了稳妥起见，我觉得咱以后还是这样改宽高吧：

  1. <body>
  2. <canvas id='tutorial'></canvas>
  3. </body>
  1. $(document).ready(function(){
  2. draw();
  3. });
  4. function draw(){
  5. var canvas = document.getElementById('tutorial');
  6. canvas.width = 150;
  7. canvas.height = 150;
  8. if(canvas.getContext){
  9. var ctx = canvas.getContext('2d');
  10. ctx.fillRect(25, 25, 100, 100);
  11. }
  12. }

休息一下，再看问题二~:arrow:

问题二： 用excanvas.js兼容IE时，条件注释位置引起的显示问题 
都知道IE9以下的版本是不支持html5的，更不要说canvas绘图了，所以，根据书上所说，我去下载了excanvas.js。 
大家都知道，js很多时候都是放在body之后的，防止页面未加载完成就执行脚本。我个人习惯也是这样做，于是我理所当然得这样写了(片段代码)：

  1. <html>
  2. <!--省略head代码-->
  3. <body>
  4. <canvas id='tutorial'></canvas>
  5. </body>
  6. <!--[if lt IE 9]>
  7. <script src="excanvas.min.js" type="text/javascript"></script>
  8. <![endif]-->
  9. <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
  10. <script type="text/javascript">
  11. $(document).ready(function(){
  12. draw();
  13. });
  14. function draw(){
  15. var canvas = document.getElementById('tutorial');
  16. if(canvas.getContext){
  17. var ctx = canvas.getContext('2d');
  18. ctx.fillRect(25, 25, 100, 100);
  19. }
  20. }
  21. </script>
  22. </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问题的更多相关文章

  1. H5 canvas的 width、height 与style中宽高的区别

    Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...

  2. Canvas设置width与height 的问题！

    最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...

  3. canvas基础入门（一）canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  4. canvas的width和height设置问题

    最近在学习canvas属性中遇到一个小问题,就是canvas的width和height设置问题 代码如下: <!DOCTYPE html> <html lang="en&q ...

  5. Canvas的width,height 和 样式中Canvas的width,height

    控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ...

  6. 转：Canvas标签的width和height以及style.width和style.height的区别

    转自:http://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html 作者:Artwl 背景 今天在博问中看到一个问题:用canvas 的 l ...

  7. 在canvas标签和style中定义width和height

    在canvas标签中定义width.height跟在style中定义width.height是不同的.canvas标签的width和height是画布实际宽度和高度,就是在这个上面绘制图形.style ...

  8. 使用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 ...

  9. 如何在一个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=& ...

随机推荐

  1. ArcGIS制图表达Representation-制图表达使用须知

    ArcGIS制图表达Representation-制图表达使用须知 by 李远祥 前面章节也介绍了一些制图表达的适用范围和场景,如果有觉得需要使用制图表达去完成其工作的话,还需要注意制图表达的一些技术 ...

  2. 浅谈stream数据流

    汴水流,泗水流,流到瓜州古渡头, 吴山点点愁.    我们知道水是源源不断的, 抽刀断水水更流, 斩不断, 理还乱,  是水流.(技术贴, 本文权当读者没学过古诗). 在一些语言里, 我们的前辈把数据 ...

  3. PHP 用session与gd库实现简单验证码生成与验证的类

    验证码是为了防止机器灌水给网站带来污染以及增加服务器负担而出现的.目前大大小小的网站都有验证码.今天自己实现了一个简单的验证码类.说简单是因为没有加一些干扰的弧线等等,只是将文字旋转了一下.当然,因为 ...

  4. 在Express的页面模板中的变量的定义与使用总结

    前言 最近在使用Express框架中的ejs页面模板趟了些许坑,仅以本文记录总结. 本文简述的均为ejs页面模板. 创建ejs变量的各种方法 1. 在Nodejs定义的ejs变量 ejs由是在node ...

  5. 浅谈css中一个元素如何在其父元素居中显示

    css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒 ...

  6. 《汇编语言程序设计》——仿windows计算器

    <汇编语言程序设计> ——计算器程序设计 目录 一.     题目与目标 1.      题目 2.      学习目的 二.     分析与设计 1.      系统分析 2.      ...

  7. ES6-01：常量与变量的声明

    首先,我们声明一个变量: //定义一个变量num,并赋值为10: let num = 10; //进行打印 console.log(num); let与var有所不同: 语法特点1:let变量只能在当 ...

  8. 第22篇 js中的this指针的用法

    前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() { thi ...

  9. 用Less定义常用的CSS3效果函数及常用颜色搭配（让CSS写起来更有趣）

    定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...

  10. Java开发之Java对数组的复制

    苏格拉底曾说过,“世界上最快乐的事,莫过于为理想而奋斗.”人生短短数十年,何不为梦想而奋斗一把?其实只要主动追求,梦想并不遥远.总有一天,你会把它攥在手里. 作为写的第一篇Java文章,展望一下开始下 ...