HTML5 是一个新兴标准，它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性，它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性，它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现，等等。本文主要关注图形方面的增强：canvas。

新的 HTML5 canvas 是一个原生 HTML 绘图簿，用于 JavaScript 代码，不使用第三方工具。跨所有 web 浏览器的完整 HTML5 支持还没有完成，但在新兴的支持中，canvas 已经可以在几乎所有现代浏览器上良好运行了，但 Windows® Internet Explorer® 除外。幸运的是，一个解决方案已经出现，将 Internet Explorer 也包含进来。

本质上，canvas 元素是一个白板，直到您在它上面 “绘制” 一些可视内容。与拥有各种画笔的艺术家不同，您使用不同的方法在 canvas 上作画。您甚至可以在 canvas 上创建并操作动画，这不是使用画笔和油彩所能够实现的。

本文探索新的 HTML canvas 元素，从简单地包含一个 canvas 元素到高级 JavaScript 交互（动画的关键）逐步进行演示。学习如何在一个 web 页面上显示 canvas。本文针对 web 设计师和开发人员，尽管 JavaScript 知识不是必须的，但理解该语言的运行方式将有所帮助。但是，HTML 知识是关键所在，尤其是如何创建一个基本 web 页面。

要查看本文展示的示例的实时实例，您需要一个浏览器并能访问 Internet。所有示例都在一个真实网站上提供（参见 参考资料）。

浏览器支持

确定哪些浏览器支持 HTML5 和一个移动目标达到什么程度。在本文撰写之时，Google Chrome、Apple Safari 和 Mozilla Firefox 都支持大多数新的 HTML5 元素，它们都支持 canvas 元素。Internet Explorer 7 和 8 都不支持 HTML5；Internet Explorer 9 处于测试阶段，支持 HTML5，但还有一些问题。

在此期间，有一个针对不支持 HTML5 的 Internet Explorer 版本的补丁可用。这个补丁的前提是创建使用 JavaScript 代码的元素。例如，可以使用代码段 document.createElement('canvas') 创建一个可识别的 Canvas 标记；但是，这并不意味着有东西经过元素本身 。一个流行的解决方法是包含一个完整的基于 canvas 的 JavaScript 库，这个库由 Google 提供，称为 ExplorerCanvas — 或简称excanvas。下载并将其作为一个外部文件引用，如下所示。（参见 参考资料 中的链接，了解更多 excanvas 信息。）

  1. <!--[if IE]>
  2.   <script type="text/javascript" src="excanvas.js"></script>
  3. <![endif]-->

通过包含 excanvas，您向 Internet Explorer 提供 canvas 及其大多数方法。

回页首

创建您的第一个 canvas

由于 canvas 只是一个 HTML 标记，因此它的显示方式只是包含在标记中。第一个示例（如 图 1 所示）显示一个最简单的 canvas。它之所以可见，是因为它通过 style 属性获得了一个颜色方案，通过 width 和 height 属性获得了其大小。

图 1. 一个空白 canvas
 

这个页面的代码简短明了，如 清单 1 所示。

清单 1. 包含一个 canvas 的 web 页面的 HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 Canvas Demo</title>
  5. <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
  6. </head>
  7. <body>
  8. <div style="margin-left:30px;">
  9. <canvas id="myCanvasTag" width="400" height="400"
  10.     style="background-color:blue;border: 10px yellow solid"></canvas>
  11. <br /><br />
  12. <a href="index.html">back</a>
  13. </div>
  14. </body>
  15. </html>

这个 canvas 的宽度和高度均为 400 像素，边框为黄色，背景为蓝色。canvas 上没有任何实际绘图；绘图通过属于 canvas 的 JavaScript 方法完成。

canvas 方法

表 1 列示了几个附加到 canvas 上下文的方法。

表 1. canvas 方法

方法 用途
getContext(contextId) 公开在 canvas 上绘图需要的 API。惟一（当前）可用的 contextID 是 2d。
height 设置 canvas 的高度。默认值是 150 像素。
width 设置 canvas 的宽度。默认值是 300 像素。
createLinearGradient(x1,y1,x2,y2) 创建一个线性渐变。起始坐标为 x1,y1，结束坐标为 x2,y2。
createRadialGradient(x1,y1,r1,x2,y2,r2) 创建一个放射状渐变。圆圈的起始坐标是 x1,y1，半径为 r1。圆圈的结束坐标为 x2,y2，半径为 r2。
addColorStop(offset, color) 向一个渐变添加一个颜色停止。颜色停止（color stop） 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。
fillStyle 设置用于填充一个区域的颜色 — 例如，fillStyle='rgb(255,0,0)'.
strokeStyle 设置用于绘制一根直线的颜色 — 例如，fillStyle='rgb(255,0,0)'.
fillRect(x,y,w,h) 填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。
strokeRect(x,y,w,h) 绘制一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形的轮廓。
moveTo(x,y) 将绘图位置移动到坐标 x,y。
lineTo(x,y) 从绘图方法结束的最后位置到 x,y 绘制一条直线。

回页首

构建更复杂的 canvas 应用程序

本小节将展示一系列示例，每个示例的功能都比前一个示例略有增加。

更深刻的视觉体验

首先，将一组矩形放置到 canvas 上。记住，矩形是拥有 4 条直边和 4 个直角的图形，正方形是矩形的变体。图 2 显示 canvas 上有一系列矩形，每个矩形都比前一个略小。注意，每个矩形的颜色都不同，使其更清晰明确。

图 2. 使用一些矩形填充的 canvas
 

清单 2 显示了用于创建图 2 中的 canvas 的代码。每个矩形都由两行代码创建：首先，fillStyle 方法使用颜色定义的红、绿、蓝（RGB）格式定义颜色（fillStyle='rgb(255,0,0)）。然后，fillRect 方法（fillRect(50,50,300,300)）定义大小。前两个值设置起始坐标，后两个值设置结束坐标。

清单 2. 使用 JavaScript 代码创建上下文并使用各种方法

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 Canvas Demo</title>
  5. <!--[if IE]>
  6.   <script type="text/javascript" src="excanvas.js"></script>
  7. <![endif]-->
  8. <script>
  9.  window.onload=function() {
  10.    var mycanvas=document.getElementById("myCanvasTag");
  11.    var mycontext=mycanvas.getContext('2d');
  12.    mycontext.fillStyle='rgb(0,0,255)';
  13.    mycontext.fillRect(0,0,400,400);
  14.    mycontext.fillStyle='rgb(255,0,0)';
  15.    mycontext.fillRect(50,50,300,300);
  16.    mycontext.fillStyle='rgb(0,255,0)';
  17.    mycontext.fillRect(100,100,200,200);
  18.    mycontext.fillStyle='rgb(100,100,100)';
  19.    mycontext.fillRect(125,175,150,25);
  20.  }
  21. </script>
  22. </head>
  23. <body>
  24. <div style="margin-left:30px;">
  25. <canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid">
  26. </canvas>
  27. <br /><br />
  28. <a href="index.html">back</a>
  29. </div>
  30. </body>
  31. </html>

要在 canvas 上绘图，通过将 getContext('2d') 应用到 canvas 元素访问提供方法的 API。通过这个 document.getElementById 方法，canvas 元素被设置为一个 JavaScript 变量：

  1. var mycanvas=document.getElementById("myCanvasTag");

然后将 getContext 应用到 canvas 元素，如下所示。

  1. var mycontext=mycanvas.getContext('2d');

一旦一个变量被设置到上下文，所有方法就可以使用了。

下一个示例展示如何结合两种技术。一种是矩形重叠，方法是使用 fillRect 参数来定位矩形（见 图 3）。

图 3. 向一个 canvas 上的矩形应用透明度
 

第二种技术是 RGB 颜色处理的变体，即添加透明度。不使用 rgb，而是使用 rgba。a 表示 alpha 通道，该通道控制透明度。在图 3 中的示例中，第二个矩形的透明度被设置为 50%（或 .5），第三个设置为 25%（或 .25）。清单 3 显示了完整的标记。

清单 3. 使用透明度

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 Canvas Demo</title>
  5. <!--[if IE]>
  6.   <script type="text/javascript" src="excanvas.js"></script>
  7. <![endif]-->
  8. <script>
  9.   window.onload=function() {
  10.     var mycanvas=document.getElementById("myCanvasTag");
  11.     var mycontext=mycanvas.getContext('2d');
  12.     mycontext.fillStyle='rgb(0,0,255)';
  13.     mycontext.fillRect(30,30,300,300);
  14.     mycontext.fillStyle='rgba(0,255,0,0.5)';
  15.     mycontext.fillRect(60,60,300,300);
  16.     mycontext.fillStyle='rgba(255,0,0,0.25)';
  17.     mycontext.fillRect(90,90,300,300);
  18.   }
  19. </script>
  20. </head>
  21. <body>
  22. <div style="margin-left:30px;">
  23. <canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid">
  24. </canvas>
  25. <br /><br />
  26. <a href="index.html">back</a>
  27. </div>
  28. </body>
  29. </html>

渐变 — 经过协调的颜色混合 — 原生于 canvas ，通过两种方法：createLinearGradient 和 createRadialGradient。图 4 展示了一个线性渐变。addColorStop 方法定义一个颜色，以及它在渐变中变为活动状态的位置。由于一个渐变可以拥有多个颜色停止，因此这种定位是主观的。颜色定位值必须介于 0 到 1 之间，但测试变体和颜色停止的数量可以生成不同的结果，即使一个值（比如 .25）保持不变。换句话说，一个颜色停止可以将其位置设定为 .25，但是相关颜色可以从整个渐变路径的四分之一处之后一点开始发生，一直持续到渐变结束，具体情况取决于您设置其他颜色停止的位置。记住，这是一个新的实现，可能还在改进过程中。渐变的一个好处是它们总是引人注目，无论代码和结果是否经过完美的协调。

图 4. 一个线性渐变
 

图 4 中的渐变通过 清单 4 中的 JavaScript 代码创建。

清单 4. 创建一个线性渐变

  1.     var mycanvas=document.getElementById("myCanvasTag");
  2.     var mycontext=mycanvas.getContext('2d');
  3.     var mygradient=mycontext.createLinearGradient(30,30,300,300);
  4.     mygradient.addColorStop(0,"#FF0000");
  5.     mygradient.addColorStop(1,"#00FF00");
  6.     mycontext.fillStyle=mygradient;
  7.     mycontext.fillRect(0,0,400,400);

注意，清单 4 中的颜色停止被全面实现为从这个方法本身创建的一个实时（on-the-fly）渐变的一个方法。语句mygradient.addColorStop(0,"#FF0000") 显示颜色停止拥有两个参数：位置和颜色。

图 5 展示了一个放射状渐变。用于创建这个渐变的代码与清单 4 中的代码类似，除了使用 createRadialGradient 方法替代createLinearGradient 方法之外。

图 5. 一个放射状渐变
 

用于创建图 5 中的放射状渐变的代码如 清单 5 所示。注意所有 5 个颜色停止。

清单 5. 创建一个放射状渐变

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 Canvas Demo</title>
  5. <!--[if IE]>
  6.   <script type="text/javascript" src="excanvas.js"></script>
  7. <![endif]-->
  8. <script>
  9.   window.onload=function() {
  10.     var mycanvas=document.getElementById("myCanvasTag");
  11.     var mycontext=mycanvas.getContext('2d');
  12.     var mygradient=mycontext.createRadialGradient(300,300,0,300,300,300);
  13.     mygradient.addColorStop("0","magenta");
  14.     mygradient.addColorStop(".25","blue");
  15.     mygradient.addColorStop(".50","green");
  16.     mygradient.addColorStop(".75","yellow");
  17.     mygradient.addColorStop("1.0","red");
  18.     mycontext.fillStyle=mygradient;
  19.     mycontext.fillRect(0,0,400,400);
  20.   }
  21. </script>
  22. </head>
  23. <body>
  24. <div style="margin-left:30px;">
  25. <canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid">
  26. </canvas>
  27. <br /><br />
  28. <a href="index.html">back</a>
  29. </div>
  30. </body>
  31. </html>

多个 canvas

一个 web 页面能够包含多个 canvas，每个 canvas 引用它们自己的独特 JavaScript 上下文变量。结果，每个 canvas 都独立于其他 canvas 工作。图 6 展示了 4 个 canvas，每个 canvas 上的图像都不同。

图 6. 一个 web 页面上的多个 canvas
 

清单 6 显示了用于创建图 6 中的页面的代码。注意，每个 canvas 都有一个惟一 ID 且每个上下文都是惟一的。

清单 6. 一个 web 页面上的多个 canvas 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 Canvas Demo</title>
  5. <!--[if IE]>
  6.   <script type="text/javascript" src="excanvas.js"></script>
  7. <![endif]-->
  8. <script>
  9.   window.onload=function() {
  10.     var mycontext1=document.getElementById("myCanvasTag1").getContext('2d');
  11.     var mycontext2=document.getElementById("myCanvasTag2").getContext('2d');
  12.     var mycontext3=document.getElementById("myCanvasTag3").getContext('2d');
  13.     var mycontext4=document.getElementById("myCanvasTag4").getContext('2d');
  14.     // gradient 1
  15.     var mygradient1=mycontext1.createLinearGradient(30,30,90,90);
  16.     mygradient1.addColorStop(0,"#FF0000");
  17.     mygradient1.addColorStop(1,"#00FF00");
  18.     mycontext1.fillStyle=mygradient1;
  19.     mycontext1.fillRect(0,0,100,100);
  20.     // gradient 2
  21.     var mygradient2=mycontext2.createLinearGradient(30,30,90,90);
  22.     mygradient2.addColorStop(1,"#FF0000");
  23.     mygradient2.addColorStop(0,"#00FF00");
  24.     mycontext2.fillStyle=mygradient2;
  25.     mycontext2.fillRect(0,0,100,100);
  26.  
  27.     var mygradient3=mycontext3.createLinearGradient(30,30,90,90);
  28.     mygradient3.addColorStop(0,"#0000FF");
  29.     mygradient3.addColorStop(.5,"#00FFDD");
  30.     mycontext3.fillStyle=mygradient3;
  31.     mycontext3.fillRect(0,0,100,100);
  32.  
  33.     var mygradient4=mycontext1.createLinearGradient(30,30,90,90);
  34.     mygradient4.addColorStop(0,"#DD33CC");
  35.     mygradient4.addColorStop(1,"#EEEEEE");
  36.     mycontext4.fillStyle=mygradient4;
  37.     mycontext4.fillRect(0,0,100,100);
  38.   }
  39. </script>
  40. </head>
  41. <body>
  42. <div style="margin-left:30px;">
  43. <canvas id="myCanvasTag1" width="100" height="100" style="border: 10px blue solid">
  44. </canvas>
  45. <canvas id="myCanvasTag2" width="100" height="100" style="border: 10px green solid">
  46. </canvas>
  47. <br />
  48. <canvas id="myCanvasTag3" width="100" height="100" style="border: 10px red solid">
  49. </canvas>
  50. <canvas id="myCanvasTag4" width="100" height="100" style="border: 10px black solid">
  51. </canvas>
  52. <br /><br />
  53. <a href="index.html">back</a>
  54. </div>
  55. </body>
  56. </html>

回页首

JavaScript 事件和动画

本文已经展示了可用于 canvas 的各种方法，每种方法都创建了一个可视结果。现在我们提高一个等级，看看 canvas 如何实现事件和动画。JavaScript 能够识别许多事件，包括在一个特定 web 页面元素上方移动或悬停鼠标。JavaScript 语言能够识别更多事件，下面的示例将使用其中几个。

整合事件

图 7 中的示例是使用前面清单中的方法创建的。现在我们添加几个新技术。面部的鼻子、眼睛和圆形项目以及外部边界都使用 arc 方法创建。眼睫毛被绘制为线条，嘴被创建为一条贝赛尔曲线。图 7 还在 canvas 底部显示了一些文本，这是使用 fillText 方法创建的。

图 7. 使用 JavaScript 事件绘制一张正在眨眼的脸
 

清单 7 显示图 7 使用的代码。

清单 7. 使用事件创建一个眨眼

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 Canvas Demo</title>
  5. <!--[if IE]>
  6.   <script type="text/javascript" src="excanvas.js"></script>
  7. <![endif]-->
  8. <script>
  9. window.onload=function() {
  10.   var mycanvas=document.getElementById("myCanvasTag");
  11.   var mycontext=mycanvas.getContext('2d');
  12.  
  13.   //draw face
  14.   mycontext.beginPath();
  15.   mycontext.arc(300, 250, 200, 0, Math.PI * 2, true);
  16.   mycontext.closePath();
  17.   mycontext.stroke();
  18.  
  19.   //draw left eye
  20.   mycontext.beginPath();
  21.   mycontext.arc(220, 150, 30, 0, Math.PI * 2, true);
  22.   mycontext.closePath();
  23.   mycontext.fillStyle='rgb(100,100,225)';
  24.   mycontext.fill();
  25.  
  26.   //draw left iris
  27.   mycontext.beginPath();
  28.   mycontext.arc(220, 150, 10, 0, Math.PI * 2, true);
  29.   mycontext.closePath();
  30.   mycontext.fillStyle='rgb(0,0,0)';
  31.   mycontext.fill();
  32.  
  33.   //draw left eyelid
  34.   mycontext.beginPath();
  35.   mycontext.arc(220, 150, 30, 0, Math.PI, true);
  36.   mycontext.closePath();
  37.   mycontext.fillStyle='rgb(200,200,200)';
  38.   mycontext.fill();
  39.  
  40.   //draw left eyelashes
  41.   mycontext.strokeStyle='rgb(0,0,0)';
  42.   lashes(mycontext,198, 170, 193, 185);
  43.   lashes(mycontext,208, 177, 204, 193);
  44.   lashes(mycontext,220, 180, 220, 195);
  45.   lashes(mycontext,232, 177, 236, 193);
  46.   lashes(mycontext,242, 170, 247, 185);
  47.   mycontext.stroke();
  48.  
  49.   openeye();
  50.  
  51.   //draw right eyelashes
  52.   mycontext.strokeStyle='rgb(0,0,0)';
  53.   lashes(mycontext, 358, 170, 353, 185);
  54.   lashes(mycontext, 368, 177, 364, 193);
  55.   lashes(mycontext, 380, 180, 380, 195);
  56.   lashes(mycontext, 392, 177, 396, 193);
  57.   lashes(mycontext, 402, 170, 407, 185);
  58.   mycontext.stroke();
  59.  
  60.   //draw nose
  61.   mycontext.beginPath();
  62.   mycontext.arc(300, 250, 20, 0, Math.PI * 2, true);
  63.   mycontext.closePath();
  64.   mycontext.stroke();
  65.  
  66.   // draw smile
  67.   mycontext.beginPath();
  68.   mycontext.lineWidth = 10;
  69.   mycontext.moveTo(180, 320);
  70.   mycontext.bezierCurveTo(140, 320, 340, 420, 400, 360);
  71.   mycontext.closePath();
  72.   mycontext.stroke();
  73.  
  74.   //draw message at bottom
  75.   mycontext.font="1em sans-serif";
  76.   mycontext.fillStyle="rgb(0,0,0)";
  77.   mycontext.fillText("Move the mouse over and off the canvas - the face winks!", 10, 480);
  78. }
  79.  
  80. function lashes(cntx,x1,y1,x2,y2) {
  81.   cntx.moveTo(x1,y1);
  82.   cntx.lineTo(x2,y2);
  83. }
  84.  
  85. function closeeye() {
  86.   //close right eye
  87.   var mycanvas=document.getElementById("myCanvasTag");
  88.   var mycontext=mycanvas.getContext('2d');
  89.   mycontext.beginPath();
  90.   mycontext.arc(380, 150, 30, 0, Math.PI * 2, true);
  91.   mycontext.closePath();
  92.   mycontext.fillStyle='rgb(200,200,200)';
  93.   mycontext.fill();
  94. }
  95.  
  96. function openeye() {
  97.   //open right eye
  98.   var mycanvas=document.getElementById("myCanvasTag");
  99.   var mycontext=mycanvas.getContext('2d');
  100.   mycontext.beginPath();
  101.   mycontext.arc(380, 150, 30, 0, Math.PI * 2, true);
  102.   mycontext.closePath();
  103.   mycontext.fillStyle='rgb(100,100,225)';
  104.   mycontext.fill();
  105.   //draw right iris
  106.   mycontext.beginPath();
  107.   mycontext.arc(380, 150, 10, 0, Math.PI * 2, true);
  108.   mycontext.closePath();
  109.   mycontext.fillStyle='rgb(0,0,0)';
  110.   mycontext.fill();
  111.   //draw right eyelid
  112.   mycontext.beginPath();
  113.   mycontext.arc(380, 150, 30, 0, Math.PI, true);
  114.   mycontext.closePath();
  115.   mycontext.fillStyle='rgb(200,200,200)';
  116.   mycontext.fill();
  117. }
  118. </script>
  119. </head>
  120. <body>
  121. <div style="margin-left:30px;">
  122. <canvas id="myCanvasTag" width="600" height="500" style="border: 5px blue solid"
  123.    onmouseover="closeeye()" onmouseout="openeye()"></canvas>
  124. <br /><br />
  125. <a href="index.html">back</a>
  126. </div>
  127. </body>
  128. </html>

图 7 中的脸通过一些 JavaScript 事件而改变。特别是， onmouseover 和 onmouseout 事件分别用于调用 closeeye() 和 openeye() 函数。这些函数不是 canvas 的方法，但是标准 JavaScript 函数。事件和函数之间的连接在 canvas 元素本身中进行。在 清单 7 中，页面的主体区域接近代码的底部，那是 canvas 所在的位置。canvas 标记内是：

  1. onmouseover="closeeye()" onmouseout="openeye()"

清单 7 中出现了一个新的构造 — beginPath() 和 endPath() 的使用，它们用于明确区分独立的复杂绘图动作。封装在其中的代码绘制一个特殊的图像，以分隔其他绘图动作。

关于 清单 7 中的代码的几个值得注意的地方列示如下：

  • 当页面打开时，通过调用 openeye() 函数来绘制右眼。
  • 使用 fillText 方法将文本写到 canvas 上。
  • 在 arc 方法中，MATH.PI * 2 创建了一个完整的圆圈，而 MATH.PI 将只创建一个半圆（例如，眼皮）。

动画

JavaScript 打包了一个强大的编程利器。这种语言能够执行很多操控，如 清单 8 所示。这个代码重复运行，在 canvas 上绘制一些线条。线条颜色随机设置。

清单 8. 使用 JavaScript 创建动画

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 Canvas Demo</title>
  5. <!--[if IE]>
  6.   <script type="text/javascript" src="excanvas.js"></script>
  7. <![endif]-->
  8. </head>
  9. <body>
  10. <div style="margin-left:30px;">
  11. <canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid">
  12. </canvas>
  13. <br /><br />
  14. <a href="index.html">back</a>
  15. </div>
  16. <script>
  17.   var mycanvas  = document.getElementById("myCanvasTag")
  18.   var mycontext = mycanvas.getContext('2d');
  19.   var x;
  20.   var y;
  21.   var x2;
  22.   var y2;
  23.   var r;
  24.   var g;
  25.   var b;
  26.  function line() {
  27.    x=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
  28.    y=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
  29.    x2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
  30.    y2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
  31.    r=Math.floor(Math.random()*255);
  32.    g=Math.floor(Math.random()*255);
  33.    b=Math.floor(Math.random()*255);
  34.    mycontext.moveTo(x, y);
  35.    mycontext.lineTo(x2, y2);
  36.    mycontext.strokeStyle='rgb(' + r + ',' + g +  ',' + b + ')';
  37.    mycontext.lineWidth=Math.floor(Math.random()*6);
  38.    mycontext.stroke();
  39.    mycontext.restore();
  40.  }
  41.  setInterval(line, 100);
  42.  
  43. </script>
  44. </body>
  45. </html>

图 8 显示了这个动画的一张快照。清单 8 中的代码与本文其他所有代码示例都不同，因为 JavaScript 块被放置到页面底部，canvas 元素下方。这确保 canvas 在代码运行之前就已经被呈现了。

图 8. JavaScript 用于绘制无穷无尽的随机线条
 

回页首

结束语

HTML5 被定位于用于改变 web 开发的面貌。新的元素使得页面布局更简单，支持通过浏览器存储本地数据，拥有 canvas 之类的音频、视频和图形平台。随着浏览器升级以支持更多新功能，web 的性质和用户体验将变得妙趣横生。web 开发前景一片光明！

使用 HTML5 canvas 绘制精美的图形的更多相关文章

  1. HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

  2. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  3. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  4. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  5. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  6. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  7. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  8. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  9. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

随机推荐

  1. sencha touch之store

    store相当于数据库的表,是模型实例的集合.(是不是可以看成结构体数组) 可以对模型实例进行新建.更新.读取.删除.排序和过滤等操作. 创建store 由于store是表,必须要有模型或者定义字段, ...

  2. PE结构笔记

    提示:前面加*为必须背下来的 DOS头: typedef struct _IMAGE_DOS_HEADER { // DOS .EXE header WORD e_magic; //* Magic n ...

  3. ubuntu14.04 64位系统下编译3.13.11内核源码

    该过程一共分为四步: 1.下载内核:我下载的是3.13.11这个版本的内核! 2.解压内核:我将其解压/home/jello/Downloads/linux-3.13.11目录下!下文将会基于此目录编 ...

  4. JAVA运算符和优先级

    1.算术运算符: ++ 和 -- 既可以出现在操作数的左边,也可以出现在右边,但结果是不同,如: ①int a=5: int b=a++: #先把a赋给b,a再自增 ②int a=5: int b=+ ...

  5. STORM_0008_Structure-of-the-codebase_Storm的代码库的结构

    http://storm.apache.org/releases/1.0.1/Structure-of-the-codebase.html Structure of the codebase 源码分成 ...

  6. 关于PHP HTML <input type="file" name="img"/>上传图片，图片大小，宽高，后缀名。

    在我们的系统中,不免要上传图片,视频等文件,在上传中,需要做的一些判断,文件大小等方面. 注意: 在php.ini 中的post_max_size,upload_max_filesize默认为2M,在 ...

  7. mypc--------------->lspci,lsusb,meminfo cpuinfo ioports filesystems interrupts mounts net partitions pagetypeinfo slabinfo timer_list uptime version zoneinfo 等配置信息

    [user@username home]$ lspci00:00.0 Host bridge: Intel Corporation 4th Gen Core Processor DRAM Contro ...

  8. SAP接口编程 之 JCo3.0系列(05) : Exception Handling

    JCO3.0的Exception,常用的Exception如下: JCoException 继承自java.lang.Exception,是JCo3中Exception的基类. JCoRuntimeE ...

  9. 调整UILabel行高间距并返回自定义宽高度

    // 获取label文字 NSString *labelString = @"XXXXXXXXXXXXXX"; // 设置自定义宽度或高度 CGSize labelSize = C ...

  10. [转载] 淘宝内部分享：怎么跳出MySQL的10个大坑（上)

    原文: http://mp.weixin.qq.com/s?__biz=MzAxNjAzMTQyMA==&mid=209773318&idx=1&sn=e9600d3db80b ...