Javascript 为什么可以'；是否使用XOR GlobalComposite操作在画布上拖动矩形？

我在画布上创建了很多矩形。现在我将拖动其中一个在画布上移动。如何操作？我找到了一个解决方案：清除画布并重新绘制。是的，它起作用了。但是如果有10000个矩形，我需要很多时间来重新绘制它们。

---

我是C++程序员。我知道如何使用XOR实现这个函数。我在找到一个Java解决方案。为什么Canvas的XOR不能像我想要的那样工作？有没有其他方法来实现我的理想？谢谢。

无法控制画布上的单个元素。

---

当你在画布上绘制一些东西时，API只会将“像素”写入画布，而忘记它的所有内容。

我不会尝试用XOR来让它工作，它并不真正合适，因为绘制的“之前”和“之后”都包括你想要移动的矩形

---

要沿着这条线开始，请查看my。

您可以创建一个包含原始画布图像的隐藏图像（拖动之前），然后使用保存的图像重新绘制，因此每次移动只有一个绘制操作

//canvas = your canvas element
//Save the image before drag
var img = new Image();
img.src = canvas.toDataURL();

//On drag, redraw the saved image
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);

---

或者，如果知道矩形的宽度和高度，则只能重新绘制矩形之前所在的区域：

//Store the rectangle's coordinates
var rectCoords = {x: 0, y: 0};
//The rectangle's size
var rectSize = {width: 50, height: 50};
//Create a canvas element
var savedCanvas = document.createElement("canvas");
savedCanvas.width = canvas.width + rectSize.width;
savedCanvas.height = canvas.height + rectSize.height;
var ctxSaved = savedCanvas.getContext("2d");

拖动前：

//Draw the entire canvas onto the saved canvas
ctxSaved.drawImage(canvas, 0, 0);
//Store your coordinates for the redraw
rectCoords.x = "Your coordinate";
rectCoords.y = "Your coordinate";

当您必须重新绘制矩形时，您只需执行以下操作：

//Draw original image only in the area where the rectangle was drawn
ctx.drawImage(savedCanvas, rectCoords.x, rectCoords.y, rectSize.width, rectSize.height,
rectCoords.x, rectCoords.y, rectSize.width, rectSize.height);
//Store your coordinates for the next redraw
rectCoords.x = "Your coordinate";
rectCoords.y = "Your coordinate";

请参阅的工作演示

---

注意：出于安全考虑，如果您在画布上绘制了来自另一个域的图像，这将不起作用。

是的，您的演示还可以。但效率低下。我有很多形状需要重新绘制。我不能及时刷新画布。它将使CPU达到100%。我需要更多建议，谢谢。drawImage将花费大量CPU，但它比重新绘制所有形状要好。您也只能重新绘制画布的特定部分（矩形所在位置）-这将减少CPU消耗。是的。这就是我正在做的。但是算法将非常复杂。