Javascript HTML 5画布全局复合操作（橡皮擦）问题

好的，几个月前我建立了一个绘图系统，基本上让用户在画布上绘图。我包括的一些功能是使用用户定义的颜色和笔划大小、橡皮擦和撤消/重做绘制

我只是浏览了一些项目，看看它们是如何运作的，并注意到一个新的问题，当我构建并发布这个草图工具时，没有发生

我的问题是，在用户绘制了任何内容，然后去橡皮擦擦除草图的一部分后，整个画布将在mousedown上清除。这以前从未发生过。橡皮擦应该跟随光标并清除鼠标的笔划路径。所以我想知道画布读取全局复合操作的方式是否有任何改变。我搜索了stack和google，但找不到任何明确的答案，所以我希望可能有其他人遇到了这个问题

我还注意到，当我在橡皮擦清除画布后切换回画笔工具时，不会再绘制任何内容。即使我撤消，它也会显示上一个已擦除的笔划，但绘制工具不再执行任何操作

如果我尝试擦除，所有内容都将被清除，但如果我撤消，它将恢复在尝试擦除之前存储的内容

以下是我用于绘制和擦除的脚本。在此问题上的任何帮助都将不胜感激。多谢各位

我还想指出，这个问题发生在最新版本的chrome、firefox和IE11上

编辑：我忘了提。在发现这个问题后，我尝试将GlobalComposite操作切换到“destination out”，但它没有像我希望的那样留下一个坚实的笔划。它只是制造了一系列的点（正在擦除），但它并不像它应该的那样平滑/干净

编辑：小提琴链接

---

要使橡皮擦重新工作，您需要在擦除功能中更改以下行：

ctx.globalCompositeOperation="copy";
ctx.strokeStyle = "rgba(0,0,0,0)";

对这些：

ctx.globalCompositeOperation="destination-out";
ctx.strokeStyle = "rgba(0,0,0,1)";

正如您在中所看到的，Firefox、Chrome和Webkit曾经不支持值

copy

。我猜当浏览器实现这个功能时，你的程序坏了

编辑： 由于某些原因，toDataUrl似乎无法正确反映橡皮擦的更改。如果将cPushArray中存储的值从ctx.getImageData更改为图像数据，并使用ctx.putImageData将数据放回画布上，则效果很好

---

你的笔划样式不透明度为空，所以几乎没有机会画任何东西。@gamealchest它怎么为空？我认为rgba（0,0,0,0）是定义它的正确方法？关于我应该尝试将其更改为什么的任何输入？rgba（）颜色的最后一个组件是alpha，范围为0.0-1.0。如果为0，则不会绘制任何内容（除非您使用特定的混合模式，但此处使用的是复合模式，而不是混合模式）。修复很简单：使用rgb（，）或rgba（，，1）。@游戏炼金术士我尝试了你的建议，但仍然面临相同的问题：（.尝试了rgba（0,0,0）和rgba（0,0,0.0）现在唯一的区别是光标显示了一个黑点，但仍然清除了整个画布，如果您可以设置一个提琴，这将非常有助于理解/调试您的问题。非常感谢！使用getImageData仍然可以在这些浏览器的旧版本上工作，对吗？@xxstevenxo是的，任何支持画布元素的浏览器都应该支持获取图像数据。

ctx.globalCompositeOperation="destination-out";
ctx.strokeStyle = "rgba(0,0,0,1)";