不同屏幕的响应式画布-最好的方法？
不同屏幕的响应式画布-最好的方法？
提问于 2014-01-17 20:09:35
所以我有一个画布元素，只是为一个应用程序做一些背景动画。我的问题是，确保它在不同设备上看起来相同的最好方法是什么？
我最好制作不同大小的画布元素并使用CSS媒体工具吗？或者，有没有一种方法可以使画布灵活并响应使用JS或html填充100%的视窗？
任何帮助都是最好的！
<html>
<head>
<meta charset="utf-8" />
<title>Canvas Resize</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
回答 2
Stack Overflow用户
发布于 2014-01-18 02:30:34
您需要显式设置画布的宽度和高度。不要使用CSS来设置画布大小，因为这只会影响元素，而不会影响它的位图(画布位图/图像会被拉伸)。
这里有一种方法：
/// assuming canvas variable exists in global scope
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas(); /// call the first time page is loaded
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}然后，您可以将CSS规则添加到画布元素：
#myCanvas {
position:fixed; /* or absolute (or not..) depending on your goal */
left:0;
top:0;
}您的文档html和body也必须使用CSS正确设置：
html, body {
width:100%;
height:100%;
margin:0;
}如果你想覆盖整个窗口，也要在最后一个CSS规则中添加overflow: hidden，以避免出现任何滚动条。
希望这能有所帮助。
Stack Overflow用户
发布于 2014-01-17 20:13:49
使用CSS 100%变量。
canvas {
width: 100%;
height: 100%;
border: solid black 1px;
}<canvas id="canvas"></canvas>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21185678
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号