Html HTML5 Canvas 100% 高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19666790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Canvas 100% height and width
提问by Steve Worth
I'm trying to make this raindrop canvas script take up 100% width and height, but nothing I seem to do works. I tried changing the CSS, and height/width in the Canvas area, but it either doesn't change anything, or it makes it not work at all. The one time I tried something that actually made it full size, it seemed to have a weird effect on the raindrops, they became all blurry and much larger, so it must have actually stretched the canvas instead of making it larger. Here's the code for the default 800x800 pixel canvas.
我试图让这个雨滴画布脚本占据 100% 的宽度和高度，但我似乎没有做任何工作。我尝试更改 Canvas 区域中的 CSS 和高度/宽度，但它要么没有改变任何东西，要么使它根本不起作用。有一次我尝试了一些实际上使它全尺寸的东西，它似乎对雨滴产生了奇怪的效果，它们变得模糊不清并且更大，所以它实际上一定是拉伸了画布而不是使它变大。这是默认 800x800 像素画布的代码。
Style
风格
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
Script for canvas
画布脚本
<script type="text/javascript">
var canvas = null;
var context = null;
var bufferCanvas = null;
var bufferCanvasCtx = null;
var flakeArray = [];
var flakeTimer = null;
var maxFlakes = 200; // Here you may set max flackes to be created
function init() {
canvas = document.getElementById('canvasRain');
context = canvas.getContext("2d");
bufferCanvas = document.createElement("canvas");
bufferCanvasCtx = bufferCanvas.getContext("2d");
bufferCanvasCtx.canvas.width = context.canvas.width;
bufferCanvasCtx.canvas.height = context.canvas.height;
flakeTimer = setInterval(addFlake, 200);
Draw();
setInterval(animate, 30);
}
function animate() {
Update();
Draw();
}
function addFlake() {
flakeArray[flakeArray.length] = new Flake();
if (flakeArray.length == maxFlakes)
clearInterval(flakeTimer);
}
function blank() {
bufferCanvasCtx.fillStyle = "rgba(0,0,0,0.8)";
bufferCanvasCtx.fillRect(0, 0, bufferCanvasCtx.canvas.width, bufferCanvasCtx.canvas.height);
}
function Update() {
for (var i = 0; i < flakeArray.length; i++) {
if (flakeArray[i].y < context.canvas.height) {
flakeArray[i].y += flakeArray[i].speed;
if (flakeArray[i].y > context.canvas.height)
flakeArray[i].y = -5;
flakeArray[i].x += flakeArray[i].drift;
if (flakeArray[i].x > context.canvas.width)
flakeArray[i].x = 0;
}
}
}
function Flake() {
this.x = Math.round(Math.random() * context.canvas.width);
this.y = -10;
this.drift = Math.random();
this.speed = Math.round(Math.random() * 5) + 1;
this.width = (Math.random() * 3) + 2;
this.height = this.width;
}
function Draw() {
context.save();
blank();
for (var i = 0; i < flakeArray.length; i++) {
bufferCanvasCtx.fillStyle = "white";
bufferCanvasCtx.fillRect(flakeArray[i].x, flakeArray[i].y, flakeArray[i].width, flakeArray[i].height);
}
context.drawImage(bufferCanvas, 0, 0, bufferCanvas.width, bufferCanvas.height);
context.restore();
}
</script>
And finally here's the body
最后是身体
<body onload="init()">
<canvas id="canvasRain" width="800px" height="800px">Canvas Not Supported</canvas>
</body>
回答by mafafu
body, #canvasRain {width:100%; height:100%; margin:0px;}will set your size properly but your problem is that your canvas height/width you're using to do your drawing doesn't pick up the proper pxvalues when setting them with %'s. And that's where the scaling comes in with the fuzzy flakes. It takes some default canvas size and stretches to 100% of the view. Adding something like
body, #canvasRain {width:100%; height:100%; margin:0px;}将正确设置您的尺寸，但您的问题是您用于绘图的画布高度/宽度在使用px%'s 设置时没有选择正确的值。这就是缩放与模糊薄片一起出现的地方。它需要一些默认的画布大小并拉伸到视图的 100%。添加类似的东西
bufferCanvas.width = canvas.width = window.innerWidth;
bufferCanvas.height = canvas.height = window.innerHeight;
seems to do the trick. And you might want/need to handle resize events to recalculate it. Here is a sample. I couldn't get jsFiddle to work for me, so it's just the whole thing.
似乎可以解决问题。并且您可能想要/需要处理调整大小事件以重新计算它。这是一个示例。我无法让 jsFiddle 为我工作，所以这就是全部。
回答by Mataniko
I've set up a fiddle that shows how to resize the canvas using some simple CSS.
我已经设置了一个小提琴，展示了如何使用一些简单的 CSS 调整画布的大小。
$('#canvasRain').css({
"height": window.innerHeight,
"width": window.innerWidth
});
I've also went ahead and updated your animation to use requestAnimationFrame. This probably what caused your Flakes to be fuzzy: The animation lagged since setTimeoutdoesn't scale to when the browser is actually ready to draw another frame.
我还继续更新您的动画以使用 requestAnimationFrame。这可能是导致您的 Flakes 模糊的原因：动画滞后，因为setTimeout它不会缩放到浏览器实际准备绘制另一帧的时间。
window.requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function animate() {
requestAnimFrame(animate);
Update();
Draw();
}
Read a little more about why you should use requestAnimationFrame at: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
阅读更多关于为什么你应该使用 requestAnimationFrame 的信息：http: //www.paulirish.com/2011/requestanimationframe-for-smart-animating/
