1

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

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

假设我画了一个矩形：

void rect(x, y, width, height)

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

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

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

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

宽度：1024 像素，高度：768 像素

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

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

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

4

2 回答 2

0

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

#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

于 2013-09-24T22:09:29.393 回答
0

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 通过在注意到调整大小时启动计时器并在计时器到期时执行回调函数来工作。这样您就可以避免移动设备发生的多个调整大小事件。

于 2013-09-24T17:44:55.387 回答