캔버스 HTML5를 사용하는 이미지 슬라이드 쇼

Question

HTML5 캔버스와 자바 스크립트를 사용하여 이미지 슬라이드 쇼를 만들려고합니다. 내 문제는 다음과 같습니다. 슬라이드 쇼는 이미지 세트를 처음으로 통과하기를 원하는 페이딩 효과와 함께 작동합니다. 그 후에 이미지는 효과없이 캔버스에 그려지고 그런 식으로 진행됩니다.

HTML :

<canvas id="showCanvas" width='600' height='400'>Canvas Not Supported</canvas> 

JAVASCRIPT :

<script type="text/javascript"> 

     var imagePaths = ["images/j0149014.jpg","images/j0149024.jpg","images/j0149029.jpg"]; 
     var showCanvas = null; 
     var showCanvasCtx = null; 
     var img = document.createElement("img"); 
     var currentImage = 0; 
     var revealTimer; 

     window.onload = function(){ 
      showCanvas = document.getElementById('showCanvas'); 
      showCanvasCtx = showCanvas.getContext('2d'); 
      img.setAttribute('width','600'); 
      img.setAttribute('height','400'); 
      setInterval(switchImage,3000); 
     } 

     function switchImage() { 

      img.setAttribute('src',imagePaths[currentImage++]); 
      img.onload = function(){ 
       if(currentImage >= imagePaths.length) 
        currentImage = 0; 
       showCanvasCtx.globalAlpha = 0.0; 
       revealTimer = setInterval(revealImage,100); 
      } 
     } 

     function revealImage() { 
      showCanvasCtx.drawImage(img,0,0,600,400); 
      showCanvasCtx.globalAlpha += 0.1; 
      if(showCanvasCtx.globalAlpha >= 1.0) 
       clearInterval(revealTimer); 
     } 

</script> 

Answer 1

는 페이딩이 예상대로 작동하지 않는 몇 가지 이유가 있습니다.

는

ctx.globalAlpha 숫자, 또는 자바 스크립트 수를 나타내는도 문자열이 아닌 수학 작업에 ctx.globalAlpha를 사용하지 마십시오. CSS 알파 값이므로 계산을 위해 참조해서는 안됩니다.

왜?

if(ctx.globalAlpha >= 1){ //is the problem as it never happens 

globalAlpha는 CSS 알파 값입니다. 유효하지 않은 CSS 값이 허용되지 않으므로 ctx.globalAlpha은 유효하지 않은 알파 값이므로 1보다 클 수 없습니다.

CSS 알파 값은 부동 소수점 값이 아니기 때문에 잘못된 결과를 초래하는 부동 소수점 값입니다. 수학적 조작.

알파가 0.999999 (그 부근)까지 올라가면 0.1을 더하면 알파가 잘못됩니다. 유효하지 않은 알파가 허용되지 않으므로 globalAlpha 값은 변경되지 않습니다. 그것은 0.99999에 머무르고 간격은 절대로 취소되지 않습니다.

따라서 img을 새 src로 변경할 때마다 모든 실행중인 간격 타이머에 의해 그려집니다.

스토어 JavaScript 변수의 알파은> = 1 인 경우 알파 테스트 세트보다는 ctx.globalAlpha

캔버스 렌더링의 CSS 알파 문자열을 사용하는 것을 사용

도면 누적 캔버스에서 0.5 이상의 알파 값을 가진 흰색은 회색 픽셀로 표시되고, 캔버스를 지우지 않고 다시 그립니다. 새 픽셀은 회색 및 흰색 0.5입니다. 두 번째 렌더링은 회색이 아닌 흰색으로 렌더링됩니다. 0.5 + 0.5 = 1;

같은 이미지를 자기 위에 그립니다. 먼저 알파 0.1 모든 픽셀 (10 %) 다음으로 알파 0.2로 20 %를 추가하여 30 %, 그 다음 0.3 60 % 및 0.4 100 %의 이미지 픽셀을 얻습니다. 따라서 알파가 0.4 일 때 이미지는 이미 완전히 렌더링됩니다.

두 장의 이미지를 유지해야합니다. 이전 이미지와 새 이미지. 이전 이미지를 알파 = 1로 그리고 다음을 필요한 알파로 그립니다 (이전 이미지가 캔버스를 지우지 않은 경우)

그러면 문제가 해결됩니다.