html5中canvas 错误集锦1（8.28）

来源：互联网发布：东莞广电网络编辑：程序博客网时间：2024/05/19 03:30

统一代码：

<!DOCTYPE html>   <head>   <meta charset="UTF-8">  <title>canvas元素示例</title>  <script type="text/javascript"  src="script.js"charset="gb2312"></script>  </head>  <body onload="draw('canvas');"><canvas id="canvas" width="400" height="400"/></body></html>

画矩形

<!DOCTYPE html>   <head>   <meta charset="UTF-8">  <title>canvas元素示例</title>  <script type="text/javascript"  src="script.js"charset="gb2312"></script>  </head>  <body onload="draw('canvas');"><canvas id="canvas" width="400" height="400"/></body></html>

1.fillRect少了一个l 20min

2.fillRect前面稍加了document
记住：所有的方法由对象调用，写方法必须先考虑谁调用了该方法 20min
3.script 中的type="text/javascript"写反了 1h+
同时找到的可能错误的地方
3.1 script中是不能不写type="text/javascript"这句话的
3.2 在传参数时 draw('canvas')的但引号是必须要加的不加的话编译器不会提示但是getContext('2d')不加是会提示的
3.3关于引号：
在HTML5中，当属性值不包括空字符串,”<“,">","=",单引号,双引号等字符时，属性值两边的引号可以省略。

百度结果如下，但事实并非如此，比如id='canvas'就必须加引号，却又但引号双引号都可以；js从来都是严格的要价引号，感觉这就是一个定义不明的黑洞啊。

画圆形：

function draw(id) {      var canvas = document.getElementById(id);      if (canvas == null)          return false;      var context = canvas.getContext('2d');      context.fillStyle = "#EEEEFF";      context.fillRect(0, 0, 400, 300);      var n = 0;     for(var i = 0; i < 10; i++)     {          context.beginPath();          context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);          context.closePath();          context.fillStyle = 'rgba(255, 0, 0, 0.25)';          context.fill();      }     }

canvas圆形
1.draw('canvans')写成draw('cnavans') 20min
可能的错误
1.1<canvas/>斜杠可加可不加
1.2<body onload="draw('canvas');">;可要可不要
1.3<!DOCTYPE HTML>html可大写可小写 <html>可要可不要
2.conrext写成contexr

各种奇形怪状：

0 0