Javascript 如何制作html画布；卷轴；无限期地

我有一个canvas元素，它在加载时自动填充客户端的整个浏览器窗口。你可以在上面用鼠标画画，就像任何“制作画板”教程的结果一样。然而，我想做的是，如果你将鼠标移动到画布的任何极端（或者选择某个“移动”工具，你可以将画布拖动到你想要的任何方向），它就会滚动。特别是，我希望理论上可以永远滚动，所以我不能真正预生成，我必须动态生成“更多画布”。有人知道怎么做吗

如果有帮助的话，现在就是客户端javascript：（html只是一个画布标记）

---

canvas元素使用计算机的真实内存，因此没有永远滚动的无限画布。但是，您可以使用虚拟画布模拟此行为。只需将draw（）捕获的xy坐标记录到一个数组中，并在鼠标触及边界时计算虚拟画布的新中心。然后过滤出适合中心+屏幕大小的xy坐标并绘制它们

但是，记录xy坐标的数组不能无限增长，并且过滤代码在数组大小上会变慢。一万分够了吗

---

更优化的代码将鼠标坐标转换为样条曲线，并仅保存重新绘制（平滑）曲线所需的点鼠标路径。

您是否尝试过设置一个变量来保存X和Y滚动值，然后将其添加到要绘制的任何图形的坐标中？您是否获得过该图形的工作版本？canvas元素的可能重复项使用计算机的真实内存，所以不存在永远滚动的无限画布。是的，我明白。现在，我将使用socket.io绘制的每一条线发送到node.js-server，这样它就有可能存储在服务器端。我所说的预渲染的意思是，一旦用户开始向一个方向滚动/移动，客户端将请求有关先前在该方向绘制的内容的数据，并在其进入视图之前绘制。一旦设置虚拟画布的宽度和高度上限，您就有了解决方案。我不确定我是否理解您的意思。现在我根本没有虚拟画布，用户可以在浏览器窗口中的空间中绘制，仅此而已。你的意思是我应该以某种方式提取坐标，并计算与“真实”画布的偏移量吗？是的，一旦你说虚拟画布有10000 x 10000像素，你就会避免很多麻烦。

$(document).ready(function() {
    init();
});

function init() {
    var canvas = document.getElementById('canvas')
      , ctx = canvas.getContext('2d')
      , width = window.innerWidth
      , height = window.innerHeight;

    // Sets the canvas size to be the same as the browser size
    canvas.width = width;
    canvas.height = height;

    // Binds mouse and touch events to functions
    $(canvas).bind({
        'mousedown':  startDraw,
        'mousemove':  draw,
        'mouseup':    stopDraw,
    });
};

// Triggered on mousedown, sets draw to true and updates X, Y values.
function startDraw(e) {
    this.draw = true;
    this.X = e.pageX;
    this.Y = e.pageY;
};

// Triggered on mousemove, strokes a line between this.X/Y and e.pageX/Y
function draw(e) {
    if(this.draw) {
        with(ctx) {
            beginPath();
            lineWidth = 4;
            lineCap = 'round';
            moveTo(this.X, this.Y);
            lineTo(e.pageX, e.pageY);
            stroke();
        }
        this.X = e.pageX;
        this.Y = e.pageY;
    }
};

// Triggered on mouseup, sets draw to false
function stopDraw() {
    this.draw = false;
};