HTML5 Canvas 100%的高度和宽度

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%的宽度和高度，但我似乎什么都不做。我尝试过改变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>

2 个解决方案

#1

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 px values 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

身体,# canvasRain {宽度:100%;高度:100%;边距:0px;}将正确设置您的大小，但问题是您用于绘制的画布高度/宽度在设置为% s时没有选择正确的px值。这就是模糊薄片的缩放。它使用一些默认的画布大小，并扩展到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为我工作，所以这就是全部。

#2

I've set up a fiddle that shows how to resize the canvas using some simple CSS.

我设置了一个小提琴显示如何使用一些简单的CSS调整画布的大小。

http://jsfiddle.net/C7LfU/1/

$('#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 setTimeout doesn't scale to when the browser is actually ready to draw another frame.

我还使用requestAnimationFrame更新了您的动画。这可能是导致雪花变得模糊的原因:由于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/

#1

bufferCanvas.width = canvas.width = window.innerWidth;
bufferCanvas.height = canvas.height = window.innerHeight;