HTML5-Canvas 100% Höhe und Breite

Ich versuche zu machen, diese regentropfen Leinwand Skript bis 100% Breite und Höhe, aber nichts, was ich scheinen zu tun. Ich habe versucht, die änderung der CSS, und die Höhe/Breite im Canvas-Bereich, aber entweder es ändert sich nichts, oder Sie macht es überhaupt nicht funktionieren. Das eine mal habe ich versucht, etwas, das tatsächlich in voller Größe, es schien eine seltsame Wirkung auf die regentropfen, Sie wurde alles verschwommen und viel größer, also muss es tatsächlich streckte die Leinwand, anstatt Sie zu vergrößern. Hier ist der code für die Standard-800x800 pixel Leinwand.

Stil

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

Drehbuch für die Leinwand

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

Und schließlich, hier ist der Körper

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

Haben Sie versucht, die Einstellung der CSS Höhe und Breite für das canvas-element?
Ja, ich habe 100% und es ändert sich nicht, es überhaupt, eigentlich legte ich den falschen code in die Beine, ich glaube nicht, dass diese sogar funktioniert, lassen Sie mich das arbeiten Standardcode in
Versuchen Sie, legen Sie die Breite und Höhe der Körper auf 100% und als der canvas-Bereich auf 100%. Beides mit css.
Ich habe die body 100% Höhe und Breite verändert und das canvas-tag <canvas id="canvasRain" width="100%" height="100%">, und es verändert auf 100 Pixel Höhe und Breite, nicht zu 100%.
mögliche Duplikate von HTML5-Canvas resize to fit window

InformationsquelleAutor Steve Worth | 2013-10-29

11

body, #canvasRain {width:100%; height:100%; margin:0px;} wird Ihre Größe richtig, aber dein problem ist, dass Ihre Leinwand Höhe/Breite, die Sie verwenden, um Ihre Zeichnung nicht abholen die richtige px Werte, wenn die Einstellung mit %s'. Und das ist, wo die Skalierung kommt mit der fuzzy-Flocken. Es dauert einige Standard-canvas-Größe und erstreckt sich auf 100% der Ansicht. Hinzufügen etwas wie
```
bufferCanvas.width = canvas.width = window.innerWidth;
bufferCanvas.height = canvas.height = window.innerHeight;
```
scheint, den trick zu tun. Und vielleicht möchte/muss um auf resize-Ereignisse neu zu berechnen. Hier ist ein Probe. Ich konnte nicht jsFiddle für mich arbeiten, so ist es nur, die ganze Sache.

Danke!!! Es funktioniert Super. Wissen Sie, wie Sie es so machen, die regentropfen bleiben würde, die die gleiche Größe und Form, wenn Sie die Größe des Fensters ändern? Wenn Sie es die Größe der regentropfen verzerrt. Es sollte vor allem es zu beheben, wenn es waren zu zwingen, die canvas Größe, um zu bleiben, was auch immer es war, wenn die Seite zuerst geladen wird. Und wenn Überlauf ausgeblendet wird, sollte es keine Probleme mit Scrollbalken.
Ich nahm die Breite/Höhe 100% von der CSS und das lässt die Leinwand in jeder gewünschten Größe legen Sie es in Ihrem code. Überprüfen Sie meine Probe wieder zu sehen. Sie könnte auch window.onresize und einfach die Breite und Höhe wieder in dieser Funktion.

InformationsquelleAutor mafafu
2

Ich habe eine Geige, die zeigt, wie man die Größe der Leinwand mit einigen einfachen CSS-Dateien.

http://jsfiddle.net/C7LfU/1/
```
$('#canvasRain').css({
   "height": window.innerHeight,
   "width": window.innerWidth
});
```
Habe ich auch ging Sie weiter und aktualisiert Sie Ihre animation verwenden requestAnimationFrame. Dies ist wahrscheinlich das, was verursacht Ihre Flocken zu fuzzy: Die animation hinkt da setTimeout nicht skaliert werden soll, wenn der browser ist tatsächlich bereit, ein weiteres zu zeichnen frame.
```
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

function animate() {
    requestAnimFrame(animate);
    Update();
    Draw();
}
```
Lesen Sie ein wenig mehr darüber, warum Sie verwenden sollten requestAnimationFrame: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

InformationsquelleAutor Mataniko

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.