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

在 HTML5 画布教程的这一部分中，我们创建一些基本的和更高级的几何形状。

长方形

第一个程序绘制两个矩形。

rectangles.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 canvas rectangles</title>
  5. <script>
  6.     function draw() {
  8.         var canvas = document.getElementById('myCanvas');
  9.         var ctx = canvas.getContext('2d');
  11.         ctx.fillStyle = 'gray';
  12.         ctx.fillRect(10, 10, 60, 60);
  13.         ctx.fillRect(100, 10, 100, 60);
  14.     }
  15. </script>
  16. </head>
  18. <body onload="draw();">
  19.     <canvas id="myCanvas" width="350" height="250">
  20.     </canvas>
  21. </body>
  22. </html>

该示例使用drawRect()方法绘制矩形。

  1. ctx.fillStyle = 'gray';

矩形的内部被涂成灰色。

  1. ctx.fillRect(10, 10, 60, 60);
  2. ctx.fillRect(100, 10, 100, 60);

fillRect()方法用于绘制正方形和矩形。 前两个参数是要绘制的形状的 x 和 y 坐标。 最后两个参数是形状的宽度和高度。

HTML5 画布形状 - 图1

图：矩形

基本形状

在下面的程序中，我们绘制一些基本形状。

shapes.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 canvas shapes</title>
  5. <script>
  6.     function draw() {
  8.         var canvas = document.getElementById('myCanvas');
  9.         var ctx = canvas.getContext('2d');
  11.         ctx.fillStyle = 'gray';
  12.         ctx.fillRect(10, 10, 60, 60);
  13.         ctx.fillRect(100, 10, 90, 60);
  15.         ctx.beginPath();
  16.         ctx.arc(250, 40, 32, 0, 2*Math.PI);
  17.         ctx.fill(); 
  19.         ctx.beginPath();
  20.         ctx.moveTo(10, 160);
  21.         ctx.lineTo(90, 160);
  22.         ctx.lineTo(50, 110);
  23.         ctx.closePath();
  24.         ctx.fill();         
  26.         ctx.save();
  27.         ctx.scale(2, 1);
  28.         ctx.beginPath();
  29.         ctx.arc(72, 130, 25, 0, 2*Math.PI);
  30.         ctx.fill();
  31.         ctx.restore();
  33.         ctx.beginPath();
  34.         ctx.arc(250, 120, 40, 0, Math.PI);
  35.         ctx.fill();                 
  36.     }
  37. </script>
  38. </head>
  40. <body onload="draw();">
  41. <canvas id="myCanvas" width="350" height="350">
  42. </canvas>
  43. </body>
  45. </html>

画布上绘制了六个不同的形状。

  1. ctx.fillStyle = 'gray';

形状将被涂成灰色。

  1. ctx.fillRect(10, 10, 60, 60);
  2. ctx.fillRect(100, 10, 90, 60);

使用fillRect()方法绘制矩形。 矩形是唯一未通过beginPath()方法启动的形状。

  1. ctx.beginPath();
  2. ctx.arc(250, 40, 32, 0, 2*Math.PI);
  3. ctx.fill();

用arc()方法绘制一个圆。 该方法将弧添加到创建的路径。 前两个参数定义圆弧中心点的 x 和 y 坐标。 接下来的两个参数指定圆弧的起点和终点。 角度以弧度定义。 最后一个参数是可选的； 它指定绘制圆弧的方向。 默认方向为顺时针。

  1. ctx.beginPath();
  2. ctx.moveTo(10, 160);
  3. ctx.lineTo(90, 160);
  4. ctx.lineTo(50, 110);
  5. ctx.closePath();
  6. ctx.fill();

使用moveTo()和lineTo()方法，我们绘制了一个三角形。 closePath()方法使笔移回当前子路径的起点。 在我们的例子中，它完成了三角形的形状。

  1. ctx.save();
  2. ctx.scale(2, 1);
  3. ctx.beginPath();
  4. ctx.arc(72, 130, 25, 0, 2*Math.PI);
  5. ctx.fill();
  6. ctx.restore();

通过缩放圆形来绘制椭圆形。 这些操作位于save()和restore()方法之间，因此缩放操作不会影响后续图形。

  1. ctx.beginPath();
  2. ctx.arc(250, 120, 40, 0, Math.PI);
  3. ctx.fill();

最后的形状（半圆）用arc()方法绘制。

HTML5 画布形状 - 图2

图：基本形状

饼形图

饼图是圆形图，将其分成多个切片以说明数值比例。

piechart.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 canvas pie chart</title>
  5. <style>
  6.     canvas {background: #bbb}
  7. </style>
  8. <script>
  9.     function draw() {
  11.         var canvas = document.getElementById('myCanvas');
  12.         var ctx = canvas.getContext('2d');
  14.         var beginAngle = 0;
  15.         var endAngle = 0;
  16.         var data = [170, 60, 45]; 
  17.         var total = 0; 
  18.         var colours = ["#95B524", "#AFCC4C", "#C1DD54"];
  19.         const SPACE = 10;
  21.         for (var i = 0; i < data.length; i++) {
  22.           total += data[i];
  23.         }
  25.         ctx.strokeStyle = 'white';
  26.         ctx.lineWidth = 2;
  28.         for (var j = 0; j < data.length; j++) {
  30.             endAngle = beginAngle + (Math.PI * 2 * (data[j] / total));
  31.             ctx.fillStyle = colours[j];
  32.             ctx.beginPath();
  33.             ctx.moveTo(canvas.width/2, canvas.height/2);
  34.             ctx.arc(canvas.width/2, canvas.height/2, canvas.height/2 - SPACE, 
  35.                 beginAngle, endAngle, false);
  36.             ctx.closePath();
  37.             ctx.fill();
  38.             ctx.stroke();
  39.             beginAngle = endAngle;
  40.         }               
  41.     }
  42. </script>
  43. </head>
  44. <body onload="draw();">
  45.     <canvas id="myCanvas" width="350" height="300">
  46.     </canvas>
  47. </body>
  48. </html>

该示例绘制了一个饼图。 它有三片，分别涂有不同的绿色阴影。

  1. <style>
  2.     canvas {background: #bbb}
  3. </style>

为了使图表的白色轮廓清晰可见，我们将画布的背景色更改为灰色。

  1. var data = [170, 60, 45];

这是饼图说明的数据。

  1. const SPACE = 10;

SPACE常数是从饼图到画布边界的距离。

  1. endAngle = beginAngle + (Math.PI * 2 * (data[j] / total));

该公式计算当前绘制的切片的结束角度。

  1. ctx.moveTo(canvas.width/2, canvas.height/2);
  2. ctx.arc(canvas.width/2, canvas.height/2, canvas.height/2 - SPACE, 
  3.     beginAngle, endAngle, false);
  4. ctx.closePath();

三种方法可用于绘制当前切片：moveTo()，arc()和closePath()。

  1. ctx.fill();
  2. ctx.stroke();

我们绘制形状的内部和轮廓。

  1. beginAngle = endAngle;

对于下一个切片，最后的终止角度成为起始角度。

HTML5 画布形状 - 图3

图：饼图

星星

下面的示例创建一个星形。

star.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 canvas star shape</title>
  5. <script>
  6.     function draw() {
  8.         var canvas = document.getElementById('myCanvas');
  9.         var ctx = canvas.getContext('2d');
  11.         ctx.fillStyle = 'gray';
  13.         var points = [ [ 0, 85 ], [ 75, 75 ], [ 100, 10 ], [ 125, 75 ], 
  14.             [ 200, 85 ], [ 150, 125 ], [ 160, 190 ], [ 100, 150 ], 
  15.             [ 40, 190 ], [ 50, 125 ], [ 0, 85 ] ];
  17.         var len = points.length;
  19.         ctx.beginPath();
  20.         ctx.moveTo(points[0][0], points[0][1]);
  22.         for (var i = 0; i < len; i++) {
  23.             ctx.lineTo(points[i][0], points[i][1]);
  24.         }        
  26.         ctx.fill(); 
  28.     }
  29. </script>
  30. </head>
  32. <body onload="draw();">
  33.     <canvas id="myCanvas" width="350" height="250">
  34.     </canvas>
  35. </body>
  36. </html>

从一系列点创建星形。

  1. var points = [ [ 0, 85 ], [ 75, 75 ], [ 100, 10 ], [ 125, 75 ], 
  2.     [ 200, 85 ], [ 150, 125 ], [ 160, 190 ], [ 100, 150 ], 
  3.     [ 40, 190 ], [ 50, 125 ], [ 0, 85 ] ];

这些是星星的坐标。

  1. ctx.moveTo(points[0][0], points[0][1]);

我们使用moveTo()方法移动到形状的初始坐标。

  1. for (var i = 0; i < len; i++) {
  2.     ctx.lineTo(points[i][0], points[i][1]);
  3. }

在这里，我们使用lineTo()方法连接星星的所有坐标。

  1. ctx.fill();

fill()方法使用定义的（灰色）颜色填充星形内部。

HTML5 画布形状 - 图4

图：星星

三个圆圈

可以通过合成来创建新形状。 合成是确定画布中形状混合方式的规则。

three_circles.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 Canvas three circles</title>
  5. <script>
  6.     function draw() {
  8.         var canvas = document.getElementById('myCanvas');
  9.         var ctx = canvas.getContext('2d');
  11.         ctx.lineWidth = 3;
  13.         ctx.fillStyle = 'gray';
  14.         ctx.beginPath();
  15.         ctx.arc(90, 90, 60, 0, 2*Math.PI);
  16.         ctx.stroke();
  18.         ctx.beginPath();
  19.         ctx.arc(120, 150, 60, 0, 2*Math.PI);
  20.         ctx.stroke();
  22.         ctx.beginPath();
  23.         ctx.arc(150, 100, 60, 0, 2*Math.PI);
  24.         ctx.stroke();        
  26.         ctx.globalCompositeOperation='destination-out';
  28.         ctx.beginPath();
  29.         ctx.arc(90, 90, 60, 0, 2*Math.PI);
  30.         ctx.fill();
  32.         ctx.beginPath();
  33.         ctx.arc(120, 150, 60, 0, 2*Math.PI);
  34.         ctx.fill();
  36.         ctx.beginPath();
  37.         ctx.arc(150, 100, 60, 0, 2*Math.PI);
  38.         ctx.fill();
  39.     }
  40. </script>
  41. </head>
  43. <body onload="draw();">
  44.     <canvas id="myCanvas" width="400" height="350">
  45.     </canvas>
  46. </body>
  47. </html>

该示例通过组合三个圆的轮廓来创建形状。 三个圆圈重叠。

  1. ctx.beginPath();
  2. ctx.arc(90, 90, 60, 0, 2*Math.PI);
  3. ctx.stroke();

在画布上绘制了一个圆圈。

  1. ctx.globalCompositeOperation='destination-out';

合成操作设置为destination-out。 在此模式下，目的地和来源不重叠的任何地方都会显示目的地。 在其他任何地方都显示透明性。

  1. ctx.beginPath();
  2. ctx.arc(90, 90, 60, 0, 2*Math.PI);
  3. ctx.fill();

现在，相同的圆圈充满了灰色。 新图形将删除两个重叠的现有图形。 结果，仅保留轮廓。

HTML5 画布形状 - 图5

图：三个圆圈

在 HTML5 画布教程的这一部分中，我们介绍了 HTML5 画布中的一些基本形状和更高级的形状。