Javascript 通过鼠标进行HTML画布平移

代码笔：

使用画布，我在画布上创建了数千个圆，画布填充了整个视口。我添加了一些平移功能，但在鼠标释放后，我遇到了重绘问题

基本上，用户可以拖动画布（代码方面，这是可行的），但在视觉上它不会显示任何平移，在鼠标释放时，画布会在其原始位置重新绘制，因此看起来好像什么都没有发生过

JS:

---

ctx.setTransform

覆盖由

ctx.translate（）

完成的（0,0）点的重新映射。因此，您应该删除行

ctx.setTransform（1,0,0,1,0,0）从draw（）函数中

$(document).ready(function() {
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext("2d");
    var global = {
        scale: 1,
        offset: {
            x: 0,
            y: 0,
        },
    };
    var panning = {
        start: {
            x: null,
            y: null,
        },
        offset: {
            x: 0,
            y: 0,
        },
    };
    var systems = '../js/json/eveSystems.json';

    fitToContainer(canvas);

    $.getJSON(systems, function(data) {

        function draw() {
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            data.forEach(function(systemData) {
                var coordX = systemData.position.x / 100000000000000;
                var coordY = systemData.position.y / 100000000000000;

                ctx.beginPath();
                ctx.arc(coordX,coordY,20,0,2*Math.PI);
                ctx.stroke();
            });
        }

        draw();

        canvas.addEventListener("mousedown", startPan);

        function pan() {
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.translate(panning.offset.x, panning.offset.y);
            console.log(panning.offset.x);
            draw();
        }

        function startPan(e) {
            window.addEventListener("mousemove", trackMouse);
            window.addEventListener("mousemove", pan);
            window.addEventListener("mouseup", endPan);
            panning.start.x = e.clientX;
            panning.start.y = e.clientY;
        }

        function endPan(e) {
            window.removeEventListener("mousemove", trackMouse);
            window.removeEventListener("mousemove", pan);
            window.removeEventListener("mouseup", endPan);
            panning.start.x = null;
            panning.start.y = null;
            global.offset.x = panning.offset.x;
            global.offset.y = panning.offset.y;
        }

        function trackMouse(e) {
            var offsetX  = e.clientX - panning.start.x;
            var offsetY  = e.clientY - panning.start.y;
            panning.offset.x = global.offset.x + offsetX;
            panning.offset.y = global.offset.y + offsetY;
        }
    });

    function fitToContainer(canvas){
        canvas.style.width ='100%';
        canvas.style.height='100%';
        canvas.width  = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
    }

});