Холст HTML5 Высота и ширина 100%

Я пытаюсь сделать этот холст капли дождем script занимающим 100% ширину и высоту, но ничего, похоже, не работает. Я попытался изменить CSS и высоту/ширину в области Canvas, но это либо ничего не меняет, либо делает это не работает вообще. Когда-то я пробовал что-то, что на самом деле делало его в натуральную величину, оно, казалось, имело странный эффект на капли дождя, они стали все размытыми и намного большими, поэтому на самом деле он должен был растянуть холст, а не увеличивать его. Здесь приведен код для холста 800x800 пикселей по умолчанию.

Стиль

<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>

Script для холста

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

И, наконец, тело

<body onload="init()">
  <canvas  id="canvasRain" width="800px" height="800px">Canvas Not Supported</canvas>
</body>

Ответ 1

body, #canvasRain {width:100%; height:100%; margin:0px;} установит ваш размер правильно, но ваша проблема заключается в том, что высота вашего холста/ширина, которую вы используете для рисования, не подбирает правильные значения px при установке их в%. И то, где масштабирование приходит с нечеткими хлопьями. Требуется размер холста по умолчанию и растягивается до 100%. Добавление чего-то типа

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

похоже, делает трюк. И вам может понадобиться/нужно обрабатывать события изменения размера, чтобы пересчитать их. Вот пример . Я не мог заставить jsFiddle работать для меня, так что это всего лишь вещь.

Ответ 2

Я установил скрипт, который показывает, как изменить размер холста с помощью простого CSS.

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

$('#canvasRain').css({
   "height": window.innerHeight,
   "width": window.innerWidth
});

Я также пошел и обновил анимацию, чтобы использовать 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();
}

Читайте немного больше о том, почему вы должны использовать requestAnimationFrame по адресу: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/