html5基础绘画工具答案

【问题标题】：html5 basic paint toolhtml5基础绘画工具
【发布时间】：2012-02-20 11:31:49
【问题描述】：

我是 html5 的新手。我正在尝试创建一个基本的绘画工具。

我想在这个工具中做的是拥有一个或多个形状（可能重叠）并绘制形状而不使颜色重叠。如果在矩形内绘制了一个圆圈并且我开始为该圆圈着色，则即使将鼠标拖动到矩形上也不应绘制该矩形，除非在其中开始拖动。

要实现这一点，我应该使用多个画布或形状吗？

提前致谢。

【问题讨论】：

【解决方案1】：

嗯，首先您需要按照跟踪不同形状的想法进行编程。如果您还没有这样做，请参阅 here 获取教程。

我想您的形状将全部保存为图像或内存画布本身。我不知道你还能怎么做。

有上百万种方法可以做到这一点，这里有一个：

当您开始您的绘图操作时，您需要检测您所在的形状。然后将该形状绘制到内存中的画布上，并将该临时画布的全局合成操作切换为source-atop。这将确保油漆只能在该形状的已经不透明的区域中进行绘制（如果这是您的意图，它似乎就是这样）。

在您绘画的过程中，您需要不断更新临时画布并重新绘制主画布。当您重绘主画布时，您需要绘制临时画布，而不是绘制该形状的图像文件（如果您使用画布来保留形状，您可以实时更新它们）。

如果您没有为每个形状使用临时画布，当您停止绘图操作时，您将不得不更新与形状关联的图像以完成操作。

为每个形状（即形状的大小且不大于）使用内存中的画布（未添加到 DOM）将使编码变得稍微容易一些，并且性能上可能不会那么糟糕。我会尝试在您的目标平台上使用 100 个和 1000 个（或更多）内存画布来查看。

另一种方法是使用内存中的画布并拥有一个代表每个形状的 HTMLImageElement (png)，但使用 canvas.toImageURL 函数本身可能会对性能产生一点影响。我会尝试这两种方法，看看哪种方法最适合您的情况。如果形状数量足够小，则可能无关紧要。

【讨论】：

感谢您的信息。这让我的大部分疑虑都清楚了。我也浏览了你提到的教程。我同意在内存画布中使用 HTMLImageElement (png)。举个例子，我们都在涂色书中着色，其中将使用笔划/轮廓绘制图像（让我们想想一个苹果）。我们将苹果涂成红色，叶子涂成绿色，苹果的背景或周围区域涂上另一种颜色。如果有一个 png 文件，它的轮廓是一个苹果，内部或外部没有填充，有没有办法检测轮廓并绘制与画布中的形状相同的形状。
你的意思是，如果你有一个形状的轮廓，是否可以轻松地绘制形状，就像它被填充一样？可悲的是，这很复杂......
是的，但我也需要形状的轮廓。可以使用getImageData() 读取图像的像素，并且可以将其绘制回画布。因此，具有形状轮廓的 png 应该能够写回画布，同时可以将形状或画布本身写回，以便可以使用画笔工具对其进行绘制。
我想实现和涂色书几乎一样的东西。但是要着色的对象/形状需要能够加载为 png 或任何使它容易的东西。
我能想到一种可能性。如果您能够事先处理图像，您可以用几乎完全透明的白色填充苹果的中心。只要它的 99.9% 透明，所讨论的方法就应该可以工作，同时在用户看来形状是空的。