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

时间:2014-01-17 12:09:35

标签: html5 css3 canvas responsive-design html5-canvas

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

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

任何帮助都会很棒!

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

2 个答案:

答案 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;
    }

您的文档htmlbody也必须使用CSS正确设置:

html, body {
    width:100%;
    height:100%;
    margin:0;
    }

如果要覆盖整个窗口,还要将overflow: hidden添加到最后一个CSS规则中,以避免出现任何滚动条。

希望这有帮助。

答案 1 :(得分:0)

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

http://jsfiddle.net/wtjNk/