我是html5的新手。我正在尝试创建一个基本的绘画工具。
我想在这个工具中做的是拥有一个或多个形状（可能重叠）并绘制形状而不会使颜色重叠。如果在矩形内绘制圆圈并且如果我开始为圆圈着色，则即使将鼠标拖过它也不应该绘制矩形，除非在其中开始拖动。
要实现这一点，我应该使用多个画布或形状吗？
提前致谢。
答案 0 :(得分：0)
嗯，首先你需要编写一个跟踪不同形状的想法。如果您还没有这样做，请参阅here获取教程。
我想你的形状将全部保存为图像或内存画布本身。我不知道你还能怎么做。
有一百万种方法可以做到这一点，这是一个：
当您开始绘图操作时，您需要检测您所在的形状。然后将该形状绘制到内存中的画布，并将该临时画布'globalcompositeoperation切换为source-atop。这将确保油漆只能在该形状的已经不透明的区域中进行绘制（如果这是您的意图，那么它似乎就是这样）。
在绘画时，您将需要更新临时画布并不断重绘主画布。当您重绘主画布时，不是要绘制该形状的图像文件，而是要绘制临时画布（如果使用画布来保留形状，您可以实时更新它们）。
如果您没有为每个形状使用临时画布，当您停止绘图操作时，您将不得不更新与该形状相关联的图像以完成操作。
对于每个形状（即形状的大小而不是更大）使用内存中的画布（未添加到DOM）将使编码变得更容易，并且可能在性能上不会那么糟糕。我会尝试在你的目标平台上使用100和1000（或更多）内存画布来试一试。
另一种方法是使用一个内存中的画布并拥有一个代表每个形状的HTMLImageElement（png），但使用canvas.toImageURL函数本身可能会有一点性能损失。我会尝试两种方法来查看哪种方法最适合您的情况。如果形状计数足够小，那可能无关紧要。