html - 使用 HTML5 画布进行横向滚动

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');