Html5 canvas HTML5画布：在大于窗口的区域上绘制

我有一个可以拖动的HTML画布上绘制的地图的全屏视口

我尝试了两种实现来设置拖动动画

首先，我让画布显示窗口的宽度和高度，当用户拖动地图时，为每个mousemove事件重新绘制，转换绘制的元素。但firefox特别不稳定，FPS很低，甚至使用了requestAnimationFrame

相反，我尝试在用户拖动时移动画布元素本身。换句话说，在画布上绘制窗口宽度和高度的3倍，居中，允许在任何方向进行完全拖动，并在用户每次完成拖动时重新绘制。这对chrome很有效，但IE和firefox只绘制了画布的左上象限。（因此，只有将画布拖向右下角时，才能看到任何图形。）

有谁能提出一个好的方法来检测第二种方法何时不能使用？对于第二种方法，IE和Firefox

$（'canvas'）.attr（“width”）

都将画布宽度返回为窗口高度的3倍，因此这不是一个选项

我能想到的唯一选择是在每个浏览器上手动测试第二种方法，并创建一个查找数组，以便代码知道何时返回第一种方法

也许有人知道一个更好的方法来处理这一切

---

谢谢

翻译画布，而不是翻译绘制的元素

context.translate（x，y）

请参见此处：注意，我总是在

0,0

处绘制图像，但当您单击并拖动时，它似乎会移动。谢谢Shmidty-但您的JSFIDLE代码不会移动已绘制的对象-它会重复地平移和绘制，正如我第一次描述的方法所做的那样，除了在新位置绘制对象外，无法移动已绘制的对象。我的方法只允许您不必单独更新每个对象的位置。您只需在同一位置继续绘制对象，画布的平移将处理其余部分。显然，此解决方案并不适用于所有问题，但对于映射，它应该可以很好地工作。此外，如果每次触发

mousemove

事件时都调用draw函数，则这可能是问题的一部分。