Question

所以我有一个canvas元素，只为应用程序做一些背景动画。我的问题是，最好的方法是确保它在不同的设备上看起来一样吗？

我最好制作不同尺寸的画布元素并使用CSS媒体quires吗？或者有没有办法使画布灵活并响应使用JS或html填充100％的视口？

任何帮助都会很棒！

<html>
<head>
    <meta charset="utf-8" />
    <title>Canvas Resize</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>

Answer 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规则中，以避免出现任何滚动条。

希望这有帮助。

Answer 2

只需使用CSS 100%变量即可。我为你做了一个小提琴。

http://jsfiddle.net/wtjNk/

针对不同屏幕的响应式画布 - 最好的方法吗？

2 个答案: