相关疑难解决方法(0)

我正在构建一个使用画布绘制的Web应用程序.我希望有一个无限大的绘图空间(您可以在任何方向上滚动任意长度)并将数据/图像保存到数据库.

在这里做了类似的事情:http://wordsquared.com/,播放它的人越多,它就越大.

我知道这需要以某种方式平铺图像,将它们保存到数据库中,然后只在视口中填充图像.如何完成这个和无限滚动/我应该从哪里开始？

我有一个canvas元素,在加载时会自动填充客户端的整个浏览器窗口.在它上面你可以用鼠标绘制,就像任何"制作绘图板"的结果一样.然而,我想要做的是,如果你将鼠标移动到画布的任何极端(或者可能选择某个"移动"工具,你可以沿你想要的任何方向拖动画布),它滚动.特别是,我希望理论上可以永久滚动,所以我不能真正预生成,我必须动态生成"更多画布".有没有人知道如何做到这一点？

如果它有帮助,这就是客户端javascript :( html只是一个canvas-tag)

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

我正在寻找一种将位图图像包裹在画布周围的方法，以获得无限滚动效果。我在看 EaselJS 但干净的 javascript 代码也足够了。

现在我正在向左移动一个图像，当它达到某个标记时，它会自行重置。

来自动作脚本，有一个选项可以将位图的像素“包裹”到另一侧，从而永远不会真正替换图像，而是将像素包裹在图像内。这在带有画布的javascript中可能吗？

我目前的代码：

this.update = function() {
    // super large graphic  
    _roadContainer.x -= 9;
    if(_roadContainer.x < -291) _roadContainer.x = 0;
}