将图表绘制到在移动设备上响应的html5画布中的最佳实践
我想在画布元素上画一个复杂的图表。
画布的宽度和高度为100%。画布的div容器的宽度为100%，移动设备1的高度为640像素。
假设我画了一个矩形：
void rect(x, y, width, height)
context.rect(0,0,100,640); 对于移动设备1，我具有以下上下文：
宽度:480，高度:640
对于移动设备2，我有这样的上下文：
宽度:1024，高度:768
当我现在切换到移动设备2时，我的context.height从640 to变为768 to。结果是，高度为640 it的矩形现在在它和缺口的顶部之间留下了一个间隙:768 px-640 it=128 it间隙。
问题1)那么画布本身就不能扩展其内容？我不要求拉伸画布本身，这很简单，我只是想拉伸画布内的内容。
问题2)当Question1回答为“不，它不能扩展其内容！”那么我如何正确地调整其内容的大小？是否有一个重绘事件，当移动设备从纵向变化到景观视图时，我可以连接到其中？还是我把640 it的高度作为100%，将画布中的内容区域划分为x-%区域，并计算与100% (640 It)相关的像素宽度为40%？这样，当移动设备的高度发生变化时，内容就会向上/向下扩展。
回答 2
Stack Overflow用户
发布于 2013-09-24 17:44:55
Q1:您可以使用画布context.scale(scaleX，scaleY)“拉伸”(==scale)画布内容。
注意:如果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的throttledresize事件，它只对每次重定向执行一次。jQuery还有一个额外的好处，就是简化了在重新定位和调整大小时确实会出现的跨浏览器问题。
如果不想将完整的库添加到项目中，可以通过在计时器注意到调整大小时启动计时器来工作，并在计时器过期时执行回调函数。这样，您就可以避免移动时发生的多个调整大小的事件。
Stack Overflow用户
发布于 2013-09-24 22:09:29
您可以尝试使用CSS " transform“来转换画布元素。
#canvas {
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}https://stackoverflow.com/questions/18982209
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号