html5 basic绘画工具

Question

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

我想在这个工具中做的是有一个或多个形状(可能是重叠的)，并在不重叠颜色的情况下绘制形状。如果在矩形内绘制了一个圆，并且如果我开始给该圆着色，则即使鼠标在矩形上拖动，也不应绘制该矩形，除非在矩形内开始拖动。

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

提前谢谢。

Answer 1

首先，你需要按照跟踪不同形状的思路来编程。如果您还没有这样做，请参阅here获取教程。

我想你的形状都会被保存为图像或者保存在内存画布中。我不知道你还能怎么做。

有一百万种方法可以做到这一点，下面是其中一种：

当你开始你的绘图操作时，你需要检测你所在的形状。然后将该形状绘制到内存中的画布上，并将临时画布的globalcompositeoperation切换为source-atop。这将确保油漆只能在该形状的已经不透明的区域中绘制(如果这是您在此处的意图，它似乎是)。

在绘画过程中，您需要不断更新临时画布并重新绘制主画布。当您重新绘制主画布时，您将希望绘制临时画布，而不是绘制该形状的图像文件(如果您使用画布保留形状，则只需实时更新这些形状)。

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

对每个形状(即形状的大小，不能更大)使用内存中的画布(不是添加到DOM中)将使编码变得稍微容易一些，并且可能在性能上不会那么差。我会在你的目标平台上用100和1000个(或更多)内存画布来试一试。

另一种选择是使用一个内存中的画布，并拥有一个表示每个形状的HTMLImageElement (png)，但是使用canvas.toImageURL函数本身可能会对性能造成一些影响。我会尝试这两种方法，看看哪种方法最适合您。如果形状计数足够小，那么使用哪种形状可能并不重要。