53、深入探索 HTML5 Canvas 绘图：从基础到高级应用

深入探索 HTML5 Canvas 绘图：从基础到高级应用

1. 多边形绘制与非零环绕规则

在 HTML5 的 <canvas> 元素中，我们可以使用 JavaScript 绘制各种多边形。以下是一段绘制三角形、正方形、五边形、六边形以及在六边形内绘制小正方形的代码示例：

polygon(c, 3, 50, 70, 50);                   // Triangle
polygon(c, 4, 150, 60, 50, Math.PI/4);       // Square
polygon(c, 5, 255, 55, 50);                  // Pentagon
polygon(c, 6, 365, 53, 50, Math.PI/6);       // Hexagon
polygon(c, 4, 365, 53, 20, Math.PI/4, true); // Small square inside the hexagon
// Set some properties that control how the graphics will look
c.fillStyle = "#ccc";    // Light gray interiors
c.strokeStyle = "#008";  // outlined with dark blue lines
c.lineWidth = 5;         // five pixels wide.
// Now draw all the polygons (each in its own su