Question

我有一个尺寸如下的画布：500x200。在这个画布里面我画了一些块（实际上是表格单元格）。关于我应该通过AJAX获取多少块的信息，但每个单元的大小是固定的 - 100x50。所以，我可以在我的画布里面只显示水平5块，垂直4块。但是其他街区呢？如果脚本返回表30x30单元格怎么办？我如何侧面滚动（鼠标首选）我的画布，所以用户可以其余的单元格（没有缩小，只滚动）。

如果您需要更多信息，请告诉我，我会提供。谢谢。

Answer 1

实现此目的的最简单方法是实现鼠标平移。

在鼠标按下事件中，开始平移并保存鼠标位置

在鼠标移动事件中，将上下文（ctx.translate(x,y)）翻译为当前鼠标位置与原始位置之间的差异，然后重绘场景。

在鼠标注册事件中，停止平移。

有更难的方法。您可以在画布中实现滚动条，就像Mozilla Bespin所做的那样（......它变成了Mozilla Skywriter，然后与Ace合并并放弃了所有Canvas的使用）。他们使用的代码非常好。

或者你可以实现DOM滚动条与你的画布一起使用，这在所有情况下都不是很容易。这涉及添加几个虚拟div以提供真实滚动条的外观和功能。我已经这样做但是代码现在还没有发布。但是，如果那就是你真正想要的东西，那就没有理由你试试。

Answer 2

在http://www.brighthub.com/hubfolio/matthew-casperson/blog/archive/2009/06/29/game-development-with-javascript-and-the-canvas-element.aspx

上查看精彩的教程

它将为您提供问题的答案以及更多......

Answer 3

我和Simon Sarris在一起，但作为替代方案，您可以克隆画布，并用空白画布替换它，然后将原始画布渲染为图像。我有一些像这样的MooTools js，这对我的使用很好，ymmv：

    var destinationCanvas = this.canvas.clone()l
    destinationCanvas.cloneEvents( this.canvas, 'mousemove');
    var destCtx = destinationCanvas.getContext('2d');
    destCtx.drawImage(
        this.canvas, 
        (this.options.scrollPx)*-1, 
        0
    );
    destinationCanvas.replaces( this.canvas );
    this.canvas.destroy();
    this.canvas = destinationCanvas;
    this.ctx        = destCtx; // this.canvas.getContext('2d');

使用HTML5画布进行侧面滚动

3 个答案: