HTML5 Canvas 100% Höhe und Breite

Ich versuche, dieses Regentropfen-Canvas-Skript 100% Breite und Höhe aufzunehmen, aber nichts, was ich zu tun scheint funktioniert. Ich habe versucht, CSS und Höhe/Breite im Canvas-Bereich zu ändern, aber es ändert nichts oder es funktioniert überhaupt nicht. Das eine Mal, als ich etwas ausprobierte, das es wirklich groß machte, schien es eine seltsame Wirkung auf die Regentropfen zu haben, sie wurden alle verschwommen und viel größer, also musste es die Leinwand tatsächlich gestreckt haben, anstatt sie größer zu machen. Hier ist der Code für das Standard-800x800-Pixel-Canvas.HTML5 Canvas 100% Höhe und Breite

Stil

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

Script 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 ist hier der Körper

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

Quelle

2013-10-29 Steve Worth

Haben Sie versucht, die Einstellung der CSS Höhe und Breite für das Canvas-Element? – aet

@aet Ja, habe ich 100% für beide versucht und es ändert es überhaupt nicht, tatsächlich habe ich auch den falschen Code eingegeben, ich glaube nicht, dass dieser überhaupt funktioniert, lass mich den funktionierenden Standardcode in –

setzen Setzen Sie die Breite und Höhe des Körpers auf 100% und dann die Leinwand auf 100%. Beide mit CSS. – MeiSign

body, #canvasRain {width:100%; height:100%; margin:0px;} Ihre Größe richtig eingestellt wird, aber Ihr Problem ist, dass Ihre Leinwand Höhe/Breite Sie verwenden, um Ihre Zeichnung nicht die richtigeabholenWerte bei der Einstellung mit% s. Und hier kommt die Skalierung mit den unscharfen Flocken ins Spiel. Es benötigt einige Standard-Canvas-Größe und erstreckt sich auf 100% der Ansicht. Hinzufügen von etwas wie

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

scheint den Trick zu tun. Und möglicherweise möchten/müssen Sie die Größenänderungsereignisse verarbeiten, um sie neu zu berechnen. Hier ist ein sample. Ich konnte JsFiddle nicht dazu bringen, für mich zu arbeiten, also ist es nur die ganze Sache.

Quelle

2013-10-29 19:54:12 mafafu

Danke! Es funktioniert großartig. Weißt du, wie man es so macht, dass die Regentropfen die gleiche Größe und Form behalten, wenn man die Größe des Fensters ändert? Immer wenn Sie die Größe ändern, werden die Regentropfen verzerrt.Es sollte meistens behoben werden, wenn die Canvas-Größe beim erstmaligen Laden der Seite beibehalten werden soll. Und wenn Überlauf ausgeblendet ist, sollte es auch keine Probleme mit Bildlaufleisten geben. –

@SteveWorth Ich habe die Breite/Höhe 100% aus dem CSS herausgenommen und das Canvas bleibt so groß wie Sie es in Ihrem Code festgelegt haben. Überprüfen Sie meine Probe erneut, um sie zu sehen. Sie könnten auch 'window.onresize' bearbeiten und einfach die Breite und Höhe in dieser Funktion einstellen. – mafafu

Ich habe eine Fidel eingerichtet, die zeigt, wie die Größe der Leinwand mit ein paar einfachen CSS geändert wird.

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

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

ich auch habe ging weiter und aktualisiert Ihre Animation request zu verwenden. Das hat wahrscheinlich dazu geführt, dass Ihre Flakes unscharf wurden: Die Animation lag unter setTimeout skaliert nicht, wenn der Browser tatsächlich bereit ist, einen anderen Frame zu zeichnen.

window.requestAnimFrame = (function() { 
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { 
     window.setTimeout(callback, 1000/60); 
    }; 
})(); 

function animate() { 
    requestAnimFrame(animate); 
    Update(); 
    Draw(); 
}

ein wenig mehr über Lesen Sie, warum Sie verwenden sollten bei request: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Quelle

2013-10-29 20:04:02 Mataniko

HTML5 Canvas 100% Höhe und Breite

Antwort

Verwandte Themen