HTML5 Canvas 100% altezza e larghezza

Sto provando a fare in modo che questo script di tela raindrop occupi il 100% di larghezza e altezza, ma nulla sembra funzionare. Ho provato a cambiare CSS e altezza/larghezza nell'area Canvas, ma non cambia nulla, o non funziona affatto. L'unica volta che ho provato qualcosa che in realtà lo ha reso a grandezza naturale, sembrava avere un effetto strano sulle gocce di pioggia, sono diventate tutte sfocate e molto più grandi, quindi deve aver effettivamente allungato la tela invece di ingrandirla. Ecco il codice per il canvas predefinito 800x800 pixel.HTML5 Canvas 100% altezza e larghezza

Stile

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

script per tela

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

E infine ecco il corpo

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

fonte

2013-10-29 Steve Worth

Hai provato impostare l'altezza e la larghezza di CSS per l'elemento canvas? – aet

@aet Sì, ho provato il 100% per entrambi e non lo cambia affatto, in realtà ho inserito anche il codice sbagliato, non penso che questo funzioni nemmeno mi permetta di inserire il codice predefinito di lavoro in –

Prova a metti la larghezza e l'altezza del corpo al 100% e rispetto alla tela al 100%. Entrambi con css. – MeiSign

body, #canvasRain {width:100%; height:100%; margin:0px;} imposterà la dimensione correttamente, ma il problema è che la tela altezza/larghezza stai usando per fare il tuo disegno non raccoglie il corretto px valori quando li si imposta con% 's. Ed è qui che il ridimensionamento arriva con i fuzzy flakes. Prende alcune dimensioni predefinite della tela e si estende al 100% della vista. Aggiungere qualcosa come

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

sembra fare il trucco. E potresti volere/dover gestire gli eventi di ridimensionamento per ricalcolarlo. Ecco uno sample. Non riuscivo a far funzionare jsFiddle per me, quindi è tutto il resto.

fonte

2013-10-29 19:54:12 mafafu

Grazie! Funziona alla grande. Sai come farlo in modo che le gocce di pioggia rimangano della stessa dimensione e forma quando ridimensionate la finestra? Ogni volta che lo ridimensioni le gocce di pioggia vengono distorte.Dovrebbe risolverlo per lo più se si costringesse le dimensioni del canvas a rimanere dovunque si trovasse al momento del caricamento della pagina. E se Overflow è nascosto, non dovrebbero esserci problemi con le barre di scorrimento. –

@SteveWorth Ho tolto la larghezza/altezza al 100% dal CSS e questo lascia la tela alle dimensioni che è stata impostata nel codice. Controlla di nuovo il mio campione per vederlo. Si può anche gestire 'window.onresize' e basta impostare nuovamente la larghezza e l'altezza in quella funzione. – mafafu

Ho impostato un violino che mostra come ridimensionare la tela utilizzando alcuni semplici CSS.

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

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

Ho anche andato avanti e ha aggiornato l'animazione da utilizzare requestAnimationFrame. Probabilmente ciò che ha causato la sfocatura dei tuoi Flakes: L'animazione ritardata dal setTimeout non si ridimensiona quando il browser è effettivamente pronto per disegnare un altro fotogramma.

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

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

leggere un po 'di più sul perché si dovrebbe usare requestAnimationFrame a: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

fonte

2013-10-29 20:04:02 Mataniko

HTML5 Canvas 100% altezza e larghezza

risposta

Problemi correlati