将图表绘制到 html5 画布中的最佳实践，该画布在移动设备上具有响应性

Question

我想在画布元素上绘制一个复杂的图表。

画布的宽度和高度为 100%。对于移动设备 1，画布的 div 容器的宽度为 100%，高度为 640 像素。（见下文）

假设我画了一个矩形：

void rect(x, y, width, height)

context.rect(0,0,100,640); 

对于移动设备 1，我有这个上下文：

宽度：480像素， 高度：640px

对于移动设备 2，我有这个上下文：

宽度：1024px， 高度：768px

当我现在切换到移动设备 2 时，我的 context.height 从 640 像素变为 768 像素。结果是高度为 640px 的矩形现在在它和间隙的上边距之间留下了一个间隙：768px - 640px = 128px 间隙。

问题 1) 所以画布本身无法拉伸其内容？我不要求拉伸画布本身，这很简单，我只想拉伸画布内的内容。

问题 2) 当问题 1 的答案是“不，它不能拉伸其内容！”那么如何正确调整其内容的大小？当移动设备从纵向视图更改为横向视图时，是否有一个重绘事件可以挂钩？还是由我决定将 640px 的高度设为 100% 并将画布中的内容区域划分为 x-% 区域并计算例如与 100% (640px) 相关的 40% 像素宽度是多少？这样，当移动设备的高度发生变化时，内容会按比例放大/缩小。

Answer 1

Q1：您可以使用 canvas context.scale(scaleX,scaleY)“拉伸”（==缩放）画布内容。

注意：如果 scaleX 不等于 scaleY，内容会失真。

它是这样工作的：

context.clearRect(0,0,canvas.width,canvas.height);
context.scale(768/640, 768/640);
// redraw all your content which will now be 768/640 larger

// and, of course, do this in reverse if the device is reoriented the other way.

移动设备重定向（纵向/横向）的一个问题是在设备重定向时会调用多个调整大小事件。

为了防止这种情况，您可以查看 jquery mobile 的 throttledresize 事件，该事件每次重新定向只执行一次。 jQuery 的另一个好处是简化了在重新定向和调整大小时确实出现的跨浏览器问题。

如果您不想将完整的库添加到您的项目中，throttledresize 的工作方式是在注意到调整大小时启动计时器并在计时器到期时执行回调函数。这样可以避免移动设备发生的多次调整大小事件。

Answer 2

您可以尝试使用 CSS“transform”来转换画布元素

#canvas {
  transform: scale(2,4);
  -ms-transform: scale(2,4); /* IE 9 */
  -webkit-transform: scale(2,4); /* Safari and Chrome */
}

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_scale