Wie mache ich eine Enthüllung vor schwarzem Hintergrund?

Question

Ich habe ein HTML5-basiertes Spiel, in dem ich den Charakter des Spielers in einer bestimmten Art und Weise zeigen möchte.

Das Ende der James Bond Gewehrlauf-Sequenz ist eine Art von was ich spreche: http://www.youtube.com/watch?v=YNajzHjjYXQ Um 0:17, gibt es einen Kreis, der die nächste Szene mit einem schwarzen Hintergrund offenbart. In den nächsten Sekunden wird der Kreis erweitert, um den ganzen Bildschirm abzudecken und dann ist das ganze Schwarz weg. Wie kann ich das in HTML5 und Javascript machen?

Answer 1

Ich würde es wahrscheinlich mit Leinwand machen und einen Kreis vor dem Füllen abschneiden. Überprüfen Sie die Geige: http://jsfiddle.net/NgCVA/

Als Demonstration habe ich ein Bild (Ihre Spielfigur) auf der Seite platziert und dann positioniert absolut ein Canvas-Element darüber:

<img src="http://zef.me/wp-content/uploads/2009/10/funny-dog-costume.jpg"/> 
<canvas width="330" height="396"></canvas>​ 

Dann werden Sie füllen, dass gesamte Leinwand mit schwarzer in einer Animationsschleife wiederholt, während einen größeren und größeren Kreis Clipping:

var canvas = document.getElementsByTagName('canvas')[0], 
    ctx = canvas.getContext('2d'), 

    cx = canvas.width/2, 
    cy = canvas.height/2, 
    r = 10, 

    R_MAX = 400; 

ctx.fillstyle = '#000'; 

function draw() { 
    r += 1; 

    ctx.clearRect(0, 0, canvas.width, canvas.height);  

    ctx.save(); 
     // Draw clipping area 
     ctx.beginPath(); 
     ctx.moveTo(0, 0); 
     ctx.lineTo(canvas.width, 0); 
     ctx.lineTo(canvas.width, canvas.height); 
     ctx.lineTo(0, canvas.height); 
     ctx.closePath(); 
     ctx.moveTo(cx + r, cy); 
     ctx.arc(cx, cy, r, 0, Math.PI*2, true); 
     ctx.closePath(); 
     ctx.clip(); 

     // Fill everything not clipped 
     ctx.fillRect(0, 0, canvas.width, canvas.height); 
    ctx.restore(); 

    if(r < R_MAX) setTimeout(draw, 10); 
} 

draw(); 

beachten Sie, dass diese sehr einfache Animation ist und Sie wollen wahrscheinlich etwas elegantere (zB Ihre eigene Animation Schleife tun , einfach ng, was auch immer). Der wichtige Teil ist die Technik zum Beschneiden und Füllen der Leinwand.