所以我有一个canvas元素,只为应用程序做一些背景动画。 我的问题是,最好的方法是确保它在不同的设备上看起来一样吗?
我最好制作不同尺寸的画布元素并使用CSS媒体quires吗? 或者有没有办法使画布灵活并响应使用JS或html填充100%的视口?
任何帮助都会很棒!
<html>
<head>
<meta charset="utf-8" />
<title>Canvas Resize</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
答案 0 :(得分:1)
您需要明确设置画布的宽度和高度。不要使用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规则添加到canvas元素:
#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;
}
如果要覆盖整个窗口,还要将overflow: hidden
添加到最后一个CSS规则中,以避免出现任何滚动条。
希望这有帮助。
答案 1 :(得分:0)
只需使用CSS 100%
变量即可。我为你做了一个小提琴。