SVG 路径

如果您想为 Lightscript 增添趣味，添加背景可以是一种吸引眼球的方式。有几种不同的方法可以实现这一点，但目前最简单、最高效的是使用 SVG 路径。

SVG 路径可以使用 Adobe Illustrator 相对容易地创建。最好从您希望简化为 SVG 路径的常规 PNG 图像开始。找到背景图像后，通过单击新建并选择 Web Large 预设，创建一个新的 Illustrator 项目。

接下来，通过在工具栏中单击 文件 -> 置入，然后在弹出窗口中选择您的图像，将参考图像导入新画板。

通常，画板比您导入的图像大得多。要修复此问题，单击对象 -> 画板 -> 适合图稿边界选项。

接下来，选择您想要隔离为路径的图像部分。SVG 图像由其轮廓路径定义的多边形组成。然后可以使用 JS Canvas API 用颜色或渐变填充这些多边形。

在这个例子中，我将描绘池塘的轮廓并用纯色填充它。首先，按键盘上的 P 选择钢笔工具。在要描绘的形状轮廓上单击一个点，然后继续添加更多点，直到您制作出与所选形状相同形状和大小的连续路径。此形状的颜色无关紧要，因为您将在 JavaScript 代码中单独设置颜色。

对路径满意后，通过单击文件 -> 导出 -> 导出为导出它。确保选择 SVG 文件类型。

在下一个打开的窗口中，确保图像设置为链接，然后单击显示代码选项。

在打开的记事本窗口中，找到 <polygon> 标签并复制 points 属性的全部内容。这应该是一串长数字。接下来，单击取消，因为您现在拥有所需的所有数据。

要在效果 canvas 上绘制基于路径的图像，请声明两个新常量。首先，声明一个设置为您之前复制的字符串的常量。

现在，使用 new Path2D(path) 创建一个新路径，其中 path 是您第一个常量的名称。

现在可以通过调用 ctx.fill(path2d) 来绘制此图像，其中 path2d 是您在前一步中声明的路径的名称。

要设置形状的颜色，请在绘制图像之前调用 ctx.fillStyle(color)。此函数接受十六进制颜色代码、CSS 颜色名称、CSS 颜色函数和渐变作为参数。

您也可以使用完整的 canvas 变换效果阵列，如缩放和平移。为确保变换仅应用于当前图像，请在每个图层绘制后使用 ctx.setTransform(1,0,0,1,0,0)。

以下示例代码展示了如何绘制简单的 SVG 路径图像。此技术可以重复任意次数以绘制复杂背景。

var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");

// Data copied from Illustrator. Make sure the first character is M.
const pondData = "M351 396.5 440 435.5 501.84 435.5 539.37 435.5 584.5 415.5 581.5 396.5 570 385.5 581.5 383.13 546 370.5 502 365.5 480.5 384.66 457.42 365.5 443.63 365.5 432.14 365.5 413 380.5 408 390.5 371 387.5 351 396.5";
// Create a new Path2D from the data.
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // Optional canvas transformation.
  ctx.fillStyle = "blue"; // Set color of path.
  ctx.fill(pondPath); // Draw the path.
  ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset transformation so it only affects this path.

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

上面的代码应该产生以下结果：