Question

我正在用canvas标签制作一堆可以单击并拖动的矩形，但是拖动4或5次后，画布开始滞后很多，我缺少什么吗？ / p>

第一次移动时，它是完美的，但其余部分则不那么平滑。

也许我没有正确清除画布，但是还有其他更好的方法吗？

$(document).on("mousedown", '#myCanvas', () => {
    mouseDown = true;
    $(document).on("mousemove", (event) => {
        if (mouseDown) {
            if (mouseX && mouseY) {

                // Clear the canvas
                canvasCtx.save();
                canvasCtx.setTransform(1, 0, 0, 1, 0, 0);
                canvasCtx.clearRect(0, 0, canvasCtx.canvas.width, canvasCtx.canvas.height);
                canvasCtx.restore();

                // Translate to new x & y
                canvasCtx.translate((canvasX + (event.pageX - mouseX)), (canvasY + (event.pageY - mouseY)));

                                // Fill with previous generated rectangles
                for (let i = 0; i < boxes.length; i++) {
                    canvasCtx.fillStyle = boxes[i].color;
                    canvasCtx.fillRect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
                }

                // Paint
                canvasCtx.stroke();

            }

            // Get last mouse movement
            mouseX = event.pageX;
            mouseY = event.pageY;
        }
    })
})

我已经创建了一个JSFiddle

Answer 1

只需将mousemove eventListener从mousedown事件监听器中取出，就像mouseup一样。我不知道，但似乎可行

每次我画相同的东西时画布都会滞后吗？

1 个答案: