【问题标题】：Creating a HTML5 infinite canvas创建 HTML5 无限画布
【发布时间】：2015-02-25 15:56:02
【问题描述】：

我正在尝试学习如何从头开始构建交互式画布，但在尝试在画布视口之外绘制东西时遇到了麻烦（超过 canvas.width 和 canvas.height 的东西）。目标是拥有类似无限画布的东西，您可以在其中滚动和缩放并将东西放在我想要的任何地方。

当我们放大时，我想出了如何正确计算正确的插入点，算法是这样工作的：

看看组件是否应该添加画布的限制；
如果是这样，则变换偏移量 (x, y) 加上点与画布边缘之间的距离。

我注意到 event.pageX 和 event.pageY 值总是根据画布的宽度和高度提供给我，所以如果我缩小这些值，那么这些值会小于它应该的值（因为我正在查看更多个像素）。变换算法在 JS 中的工作如下：

// pageX is 430, pageY is 480
// canvas has width=600 height=600
// scale is 0.6, meaning the canvas actually has size 360x360

var currentSize = canvas.width * scale;  // 360
pageX = canvas.width + (pageX - currentSize);
pageY = canvas.width + (pageY - currentSize);

在纸上绘制此逻辑似乎可行，但问题是我（显然）无法在画布限制之外绘制，因此我无法看到结果。问题是：

这个逻辑正确吗？
有没有办法实现我的目标？（指点正确的文献将不胜感激）
画布是工作的正确工具还是我应该使用其他工具？

可以在fiddle 上找到我用来学习的完整示例。

更新

我有另一个想法来解决这个问题：我没有在画布外部绘制东西，而是简单地将我的点按比例转换为适合画布的限制，然后应用缩放来放大/缩小。像这样的：

// canvas is 500x500
var points = [
    {text: 'Foo', x: 10, y: 10},
    {text: 'Bar', x: 854, y: 552},  // does not fit inside
    {text: 'Baz', x: 352, y: 440}
];

// The canvas can't show all these points, the ideal
// would be having a canvas of at least size 900x600,
// so I can use a rule of three to convert all points
// from this imaginary canvas to fit inside my 500x500

// in 900px, x=10
// in 500px, x=?

// hence, the formulas are `newX=x * 500 / 900` and `newY = y * 500 / 600`

var converted_points = [
  {text: 'Foo', x: 5.55, y: 8.33},
  {text: 'Bar', x: 474.44, y: 460},
  {text: 'Baz', x: 195.55, y: 366.66}
];

之后我想我只需要缩放/变换画布来进行缩放。这个逻辑可以吗？

【问题讨论】：

"在画布的视口之外绘制东西" 为什么在它们不在视线范围内时绘制它们？在您单击的示例中，它会创建文本，那么将其置于视野之外的用例是什么？
画布已经画出了很多东西。主要是蘑菇。
@atmd，这个想法是绘制部分不在画布上和部分在画布上的图像。我们的想法是呈现一个视觉上类似于向外看汽车的侧寡妇并看到风景滚动的场景;-)
是的，这基本上就是@markE 所说的。我对这类东西没有经验，这就是我问这个问题的原因（当你想到游戏和东西时，这似乎是一个已解决的问题）。
由于画布有剪裁，它已经是“无限的”。只需绘制，画布就会剪掉它外面的任何东西。如果对象不包含、重叠或与画布区域相交，则不调用任何绘制操作进行优化。

标签： javascript html canvas html5-canvas

【解决方案1】：

您可以使用名为 TiledCanvas 的库
它提供了缩放和移动的界面。并使用所有 canvas api 在无限空间中绘制。

它确实需要你告诉你在哪里画。

https://github.com/Squarific/TiledCanvas

【讨论】：