如何无限期地制作html画布“滚动”？

我有一个画布元素，当加载时会自动填充客户端的整个浏览器窗口。在它上面，你可以用鼠标进行绘制，就像任何“制作绘图板” - 在那里的教程一样。然而，我想要做的是，如果你将鼠标移动到画布的任何极端（或者选择某个“移动”工具，你可以将画布向任意方向拖动），那么滚动。特别是，我希望它有可能在理论上永远滚动，所以我不能真正预生成，我必须在飞行中生成“更多画布”。有没有人知道如何做到这一点？如何无限期地制作html画布“滚动”？

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

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

来源

2011-03-28 mag

您是否尝试设置一个变量来保存X和Y滚动值，然后将其添加到您绘制的任何坐标中？ – Delta 2011-03-29 04:09:50

你有没有得到这个工作版本？ – skalb 2012-03-21 20:51:32

[Make a canvas infinite]可能的重复（http://stackoverflow.com/questions/38589304/make-a-canvas-infinite） – bummi 2016-12-31 16:38:46

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

但是，记录xy坐标的数组无法无限增长，并且滤波器代码在数组大小上会变慢。足够10,000点吗？

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

来源

2011-03-29 07:53:48 noiv

>画布元素使用计算机的真实内存，所以没有无限的画布永远卷动。是的，我明白了。现在，我将每个绘制的线路用socket.io发送到node.js-server，因此它可能会存储在服务器端。预先渲染的意思是，一旦用户开始向一个方向滚动/移动，客户端会先要求提供该方向的内容的数据，然后在进入视图之前进行绘制。 – mag 2011-03-29 15:12:25

一旦将虚拟画布的宽度和高度设置为上限，就有了解决方案。 – noiv 2011-03-29 17:21:07

我不确定我明白你的意思。现在我根本没有虚拟画布，用户可以在他的浏览器窗口中绘制空间，就是这样。你的意思是我应该以某种方式提取坐标，并计算“真实”画布的偏移量？ – mag 2011-03-29 18:14:17

如何无限期地制作html画布“滚动”？

回答

相关问题