Javascript 缩放实时白板内容的最佳方式是什么

我正在用angularjs、socketio和node.js制作白板

只要我在任何地方使用固定宽度/高度的画布，我就可以广播鼠标/触摸事件的坐标并实时重新创建图形。然而，我面临的问题是，当试图使画布在不同的平台上具有不同的大小时（想想桌面和智能手机），画布必须缩放，图形也必须缩放，但这会使事情变得非常缓慢

我目前采用的方法是在原始大小的临时隐藏画布中绘制图形，然后当绘制流暂停时（换句话说，用户已停止涂鸦），我将其缩放并复制到主画布。问题是，它根本感觉不到实时性，特别是当用户不停地涂鸦一段时间时。我可以尝试的另一种方法是推送数组中的所有坐标，对其应用二维仿射变换，然后重新绘制整个数组。虽然这似乎也不是一个很好的解决方案，当数组大小增加时，反复尝试实时应用转换很容易消耗大量资源

---

有没有更好的方法来实现这一点？

使用css缩放变换。缩放画布以适应设备的大小，无论是移动设备、桌面设备、平板电脑还是其他设备

让画布在所有设备上保持固定宽度。假设它是640像素乘以480像素。现在我们将调整它的大小以适应任何窗口

$(window).resize(function() {

  var w = 640; // $('#mycanvas').width();
  var h = 480; // $('#mycanvas').height();

  var newWidth = $(window).width(); // this could be either smaller or bigger than the canvas
  var newHeight = $(window).height(); // same here

  var scaleX = newWidth / w;
  var scaleY =  newHeight / h;

  $('#mycanvas').css('transform','scale(' + scaleX + ',' + scaleY +')');
    $('#mycanvas').css('-webkit-transform','scale(' + scaleX + ',' + scaleY +')');
});

注意：mycanvas也可以是一个容器，如果有任何类型包含canvas和其他div或其他任何内容的话。只要确定w是容器的宽度，等等

注意：如果有人用手指在屏幕上画画，您可能需要将其从缩放坐标转换为固定宽度（640x480）坐标

---

顺便说一句，我找到了一种更好的方法。不确定：

---

在最近的鼠标/触摸事件和上一个鼠标/触摸事件之间画一条线。将其与某种参考宽度或高度数字一起广播，以作为计算的基础。在另一个客户端上，将给定的宽度或高度除以本地宽度/高度，然后将该数字乘以给定行数据的X和Y坐标。画出来就忘了。你现在有了一条按比例绘制的线，你需要花费几纳秒来计算，基本上没有内存开销。@nick，这是个好主意，这就是为什么我主要关注2d仿射变换的原因，但问题是，缩放单个线条是否会准确反映完整形状的曲线和角度缩放？很抱歉，响应速度太慢-让我写一个完整的答案这不是一个好的解决方案，因为允许画布不相称地缩放也会使其内容变形（挤压/拉伸）。而是计算一个保持原始纵横比的单一比例因子，并将该单一比例因子应用于高度和宽度。是的，没错，我只想给出基本的css比例示例。