时间戳

首页 > 解决方案 > 每次我画同样的东西时，画布都会滞后？

javascript - 每次我画同样的东西时，画布都会滞后？

问题描述

我正在摆弄画布标签，制作一堆可以单击并拖动的矩形，但是在拖动 4 或 5 次后，画布开始滞后很多，我错过了什么吗？

第一次移动它是完美的，但其余的并不那么顺利。

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

$(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

标签： javascriptjquerycanvas

解决方案

就像 mouseup 一样，只需将 mousemove eventListener 从 mouse down eventListener 中取出即可。我不知道，但似乎有效

推荐阅读