검정색 배경에 대한 공개는 어떻게합니까?

Question

나는 플레이어의 캐릭터를 특정한 방식으로 드러내고 자하는 HTML5 기반의 게임을 가지고있다.

제임스 본드 총 배럴 시퀀스의 끝은 내가 말하고있는 것과 같습니다. http://www.youtube.com/watch?v=YNajzHjjYXQ 0:17 경에는 검은 색 배경으로 둘러싸인 다음 장면을 나타내는 원이 있습니다. 다음 몇 초 동안, 원은 화면 전체를 덮기 위해 확장되고 모든 검정색은 사라집니다. HTML5 및 Javascript에서 어떻게이 작업을 수행 할 수 있습니까?

Answer 1

필자는 캔버스로 작성하고 작성하기 전에 원을 그리십시오. 바이올린 확인 : http://jsfiddle.net/NgCVA/

데모로를, 나는 페이지에 이미지 (게임 캐릭터)를 배치하고 절대적으로 그 위에 캔버스 요소를 배치했습니다

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

그런 다음 채우기를 것을 애니메이션 루프에서 반복적으로 검은 색 전체 캔버스 더 크고 더 큰 원 클리핑 동안이 매우 단순한 애니메이션이 있음을 유의하십시오 당신은 아마 더 우아한 무언가를하고 싶을 것이다

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(); 

(예 : 자신의 애니메이션 루프 , 쉬운 ng, 뭐든간에). 중요한 부분은 캔버스를 클리핑하고 채우는 기술입니다.