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

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

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

假设我画了一个矩形：

void rect(x, y, width, height)

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

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

宽度：480px， 高度：640px

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

宽度：1024px， 高度：768px

当我现在切换到移动设备2时，我的context.height从640px更改为768px。结果是，高度为640px的矩形现在在它和间隙的上边缘之间留有间隙：768px-640px=128px间隙

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

问题2

---

当问题1的答案为“否”时，它无法扩展其内容！那么如何正确调整其内容的大小？当移动设备从纵向视图更改为横向视图时，是否有重画事件可供我参与？还是由我决定将640px的高度作为100%，并将画布中的内容区域划分为x-%区域，然后计算例如与100%640px相关的40%像素宽度？这样，当移动设备的高度发生变化时，内容将向上/向下缩放。

Q1：您可以使用画布上下文拉伸==缩放画布内容。scalescaleX，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的ThrottleResize事件，该事件在每次重新定向时只执行一次。jQuery还有一个额外的好处，就是简化了重新定向和调整大小时出现的跨浏览器问题

---

如果不想将完整库添加到项目中，ThrottleResize的工作原理是，当它注意到调整大小时启动计时器，并在计时器过期时执行回调函数。这样可以避免在mobile中发生多个调整大小事件。

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

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

---

我使用knockoutjs将数据绑定到画布。有那个方向的提示吗我还没有测试画布代码是否在我翻转ipad时再次执行。。。KnockoutJS是一个很好的数据绑定选择，我有更多的时间会考虑这个问题。当然，您必须在resize事件中触发画布代码resize或throttledresize；这将拉伸画布，但不会增加其分辨率。我从问题2开始认为这也是一个合适的解决方案