原文： https://zetcode.com/gfx/html5canvas/introduction/

HTML5 画布教程的这一部分是对 JavaScript 语言的 HTML5 画布编程的介绍。

关于

这是 HTML5 画布教程。 它是针对初学者的。 本教程将教您 HTML5 canvas元素的 JavaScript 图形编程基础。 可以在此处下载本教程中使用的图像。

HTML5 画布元素提供了可同时处理矢量和栅格图形的工具。

HTML5 画布

HTML5 canvas元素提供了一个与分辨率有关的位图区域，该区域可用于动态绘制图形，游戏图形，艺术作品或其他可视图像。 简单来说，canvas是 HTML5 中的新元素，它使您可以使用 JavaScript 绘制图形。 Canvas无需将插件插入 Flash，Silverlight 或 Java，即可将动画带入网页。

HTML5 canvas最初由 Apple 于 2004 年推出，用于 Mac OS X WebKit，以为仪表板应用及其 Safari Web 浏览器提供动力。 从那时起，它已被 Mozilla 和 Opera 所采用。 后来，W3C 在 HTML5 规范中采用了它。 如今，所有现代 Web 浏览器都支持它。

画布上下文

canvas上下文是一个对象，它公开画布 API 来执行绘图。 它提供对象，方法和属性，以在画布绘图表面上绘制和操纵图形。 使用getContext()方法检索上下文。 方法的参数指定所需的 API：用于二维图形的"2d"或用于二维和三维图形的"webgl"。 如果不支持给定的上下文 ID，则返回null。

画一个矩形

我们创建一个简单的 HTML5 canvas图形渲染示例。

rectangle.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 canvas rectangle</title>    
  5. <script>
  6.     function draw() {
  7.         var canvas = document.getElementById('myCanvas');
  8.         var ctx = canvas.getContext('2d');
  10.         ctx.fillStyle = "cadetblue";
  11.         ctx.fillRect(0, 0, 100, 100);
  12.     }    
  13. </script>
  14. </head>
  16. <body onload="draw();">
  17.     <canvas id="myCanvas" width="250" height="150">
  18.     </canvas>
  19. </body>
  20. </html>

该代码示例在网页的左上角绘制一个cadetblue矩形。

  1. <!DOCTYPE html>

文档类型声明或DOCTYPE是对 Web 浏览器的有关 HTML 文档性质的指令。 这个特定的声明告诉浏览器该网页是 HTML5 文档。 canvas元素最初是在 HTML5 标准中引入的。

  1. <script>
  2.     function draw() {
  3. ...
  4.     }    
  5. </script>

在自定义draw()函数中执行绘制。 加载 HTML 文档的正文时会调用它。

  1. var canvas = document.getElementById('myCanvas');

通过getElementById()方法，我们获得对canvas元素的引用。

  1. var ctx = canvas.getContext('2d');

使用getContext()方法检索渲染上下文。

  1. ctx.fillStyle = "cadetblue";

上下文的fillStyle属性指定在内部形状中使用的颜色或样式。 然后在后续的绘图操作中使用该样式。

  1. ctx.fillRect(0, 0, 100, 100);

我们用指定的颜色绘制一个矩形。 矩形的大小在方法的参数中给出。 前两个参数是 x 和 y 坐标。 接下来的两个参数是矩形的宽度和高度。

  1. <body onload="draw();">

onload属性为窗口的加载事件定义事件处理器。 加载事件在文档加载过程结束时触发。 至此，文档中的所有对象都在 DOM 中，并且所有图像，脚本，链接和子框架均已完成加载。 在我们的例子中，我们调用draw()方法，该方法在画布上执行绘制。

  1. <canvas id="myCanvas" width="250" height="150">
  2. </canvas>

canvas元素是使用<canvas>和</canvas>标签创建的。 width和height属性设置页面内 canvas 元素的大小。 id属性标识 DOM 层次结构中的元素。

介绍 - 图1

图：HTML5 画布矩形

阴影

HTML5 画布包含用于创建阴影的属性。

shadow.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 canvas shadow</title>    
  5. <script>
  6.     function draw() {
  7.         var canvas = document.getElementById('myCanvas');
  8.         var ctx = canvas.getContext('2d');
  10.         ctx.shadowOffsetX = 5;
  11.         ctx.shadowOffsetY = 5;
  12.         ctx.shadowBlur    = 4;
  13.         ctx.shadowColor   = "#888";  
  15.         ctx.fillStyle = "#000000";
  16.         ctx.fillRect(10, 10, 80, 80);
  17.     }    
  18. </script>
  19. </head>
  21. <body onload="draw();">
  22.     <canvas id="myCanvas" width="250" height="150">
  23.     </canvas>
  24. </body>
  25. </html>

在示例中，我们在矩形下方创建阴影。

  1. ctx.shadowOffsetX = 5;

shadowOffsetX属性指定阴影在水平方向上偏移的距离。

  1. ctx.shadowOffsetY = 5;

shadowOffsetY属性指定阴影在垂直方向上将偏移的距离。

  1. ctx.shadowBlur    = 4;

shadowBlur属性指定模糊效果的级别。

  1. ctx.shadowColor   = "#888";

shadowColor属性指定阴影的颜色。

介绍 - 图2

图：HTML5 画布阴影

参考

以下资源用于创建本教程：

HTML5 画布教程的这一部分是对 HTML5 画布的 JavaScript 编程的介绍。