HTML5大画布 - 移动和缩放整个内容，包括背景

Question

我的最终目标是使用html5实现类似http://www.crystal.ch/abb/power_systems_landscape/的应用。

如您所见，我们可能需要一个大型（2000 * 600）画布，但我不确定。

任何人都可以根据上述链接的行为给我一些想法吗？

1. 包括背景在内的整个画布内容可以使用mousemove和mousedown操作顺利地左右移动
2. 根据电力系统选择，包括背景在内的整个画布内容顺畅地左右移动
3. 放大缩小
4. 淡出效果，如加上标志性的圈子

任何想法都会受到赞赏。

Answer 1

基本上你想要这样的东西

<div id='wrapper' style='position: overflow: hidden; relative; width: 500px; height: 300px;>
    <canvas id='canvas' width='2000' height='600'></canvas>
<div>

然后当你想要滚动时，你会做类似

的事情

document.getElementById('wrapper').scrollTo(x, y);

和缩放将是

document.getElementById('canvas').style.width = 2000 * zoom;
document.getElementById('canvas').style.height = 600 * zoom;

你可以玩setInterval以及什么不能让滚动和缩放变得漂亮和平滑，但这绝对是在大画布上获得这些效果的最快方法，因为没有重绘。

Answer 2

我建议如果您使用2D画布js，不使用缩放或移动canvas元素或任何其他html元素，最好在draw函数中编写算法。缩放是质量和速度的死亡，从缩放到缩小可能很复杂（不要忘记画布上的所有可见数据只是一个图像）。 我设法上传了13000像素和多人头像的图片，以显示绘制/更新功能中的所有算法。

如果使用2个画布，则可以从代码大图像中裁剪，然后合成到可视地图。

如果图像宽度太大＆gt; 3000 ps必须除以较低级别（在iOS设备上用于图像〜> 3000px变为负比例 - 图像变小）。