HTML5画布：操纵个人路径 [英] HTML5 Canvas: Manipulating Individual Paths

问题描述

如何在使用HTML5 canvas时保存javascript变量/数组的特定路径，然后对其进行操作？这是我到目前为止做的：

How can I save a specific path to a javascript variable/array, and later manipulate it, when using an HTML5 canvas? Here's what I'm doing thus far:

                    ctx.beginPath();
                        ctx.moveTo(lastX,lastY);
                        ctx.lineTo(x,y);
                        ctx.lineWidth = s*2;
                        ctx.stroke();
                    ctx.closePath();

现在，我需要的是有时可以将此路径存储在数组中。然后，我需要能够回来并更改数组中所有路径的颜色。 （我也不知道如何做到这一点。）

Now, what I need is to be able to, at times, store this path in an array. Then, I need to be able to go back and change the color of all the paths in the array later. (I don't know how to do this either, obviously.)

推荐答案

看起来现在可能有一个新的 path2D 对象。

It looks like it is now possible with a new path2D object.

新的Path2D API（可从Firefox 31+获得）允许您存储路径，这简化了您的画布图代码并使其运行更快。构造函数提供了三种方法来创建一个Path2D对象：

The new Path2D API (available from Firefox 31+) lets you store paths, which simplifies your canvas drawing code and makes it run faster. The constructor provides three ways to create a Path2D object:

new Path2D();     // empty path object
new Path2D(path); // copy from another path
new Path2D(d);    // path from from SVG path data

第三个版本，特别方便。现在，您可以重新使用SVG路径，直接在画布上绘制相同的形状：

The third version, which takes SVG path data to construct, is especially handy. You can now re-use your SVG paths to draw the same shapes directly on a canvas as well:

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

信息取自 Mozilla官方网站。

这篇关于HTML5画布：操纵个人路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！