HTML5キャンバススライドショーの問題

Question

私はリンクからの呼び出しでトリガーしているスライドショーを持っています。スライドショーはうまくいきます。スライドショーを中止してクリアするのに問題があります。私はshowを停止しているstopShow関数を呼び出す一時的なリンクを持っていますが、それをクリアしていないので他のアイテムを再表示できます。

// JavaScript Document 

    var imagePaths = ["_sites/BBB_homepage.png","_sites/CabezonKidsDental_homepage.png","_sites/djer_homepage.png","_sites/enchanted_homepage.png","_sites/JoeSSausage_homepage.png","_sites/MMCS_homepage.png","_sites/mySRB.png","_sites/PHCP_homepage.png","_sites/smilesforkidsnm_homepage.png","_sites/t2consulting_homepage.png","_sites/Upward_homepage.png","_sites/Webb_based_homepage.png"]; 
    var showCanvas = null; 
    var showCanvasCtx = null; 
    var img = document.createElement("img"); 
    var currentImage = 0; 
    var revealTimer; 
    var stopShow = 0; 
    var slideTImer; 

    function slideShow() { 
     if (!stopShow){ 
      showCanvas = document.getElementById('Canvas1'); 
      showCanvasCtx = showCanvas.getContext('2d'); 

      //clear canvas 
      showCanvasCtx.clearRect(0,0,showCanvasCtx.canvas.width,showCanvasCtx.canvas.height); 

      //set image size and call switch function 
      img.setAttribute('width','500'); 
      img.setAttribute('height','400'); 
      switchImage(); 

      //start the animation 
      slideTimer = setInterval(switchImage,3000); 
     } 
    } 

    function switchImage() { 
     //set img element source property to images in slideshow 
     img.setAttribute('src',imagePaths[currentImage++]); 
      //if past the last image, loop 
      if (currentImage >= imagePaths.length) 
       currentImage = 0; 

      //fade into image by 10th of full saturation 
      showCanvasCtx.globalAlpha = 0.1; 
      revealTimer = setInterval(revealImage,100); 
    } 

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


    function stopSlideShow() { 
     //alert('stop show'); 
     clearInterval(slideTimer); 
     clearInterval(revealTimer); 
     stopShow=1; 

     showCanvas = document.getElementById('Canvas1'); 
      showCanvasCtx = showCanvas.getContext('2d'); 

      //clear canvas 
      showCanvasCtx.clearRect(0,0,showCanvasCtx.canvas.width,showCanvasCtx.canvas.height); 

    } 

Answer 1

これは間違っています。

showCanvasCtx.canvas.width 

キャンバスのオブジェクトモデルは、このように動作します：

キャンバス - >コンテキスト

幅と高さのパラメータがコンテキストではなく、キャンバス自体にではありません。だから、あなたはあなたのコードでそれらをこのようになっ考慮：

showCanvas = document.getElementById('Canvas1'); 
showCanvasCtx = showCanvas.getContext('2d'); 

あなたはこのようなキャンバスの大きさを取得する必要があります：

showCanvas.width 
showCanvas.height 

Answer 2

if (!stopShow){コールを除去し、stopSlideShow機能でキャンバスをクリアしてこの機能は必要に応じて機能します。 stopSlideShow関数でglobalAlphaを1に設定する必要がありました。終了コードは次のようになります。

// JavaScript Document 

    var imagePaths = ["_sites/BBB_homepage.png","_sites/CabezonKidsDental_homepage.png","_sites/djer_homepage.png","_sites/enchanted_homepage.png","_sites/JoeSSausage_homepage.png","_sites/MMCS_homepage.png","_sites/mySRB.png","_sites/PHCP_homepage.png","_sites/smilesforkidsnm_homepage.png","_sites/t2consulting_homepage.png","_sites/Upward_homepage.png","_sites/Webb_based_homepage.png"]; 
    var showCanvas = null; 
    var showCanvasCtx = null; 
    var img = document.createElement("img"); 
    var currentImage = 0; 
    var revealTimer; 
    var stopShow = 0; 
    var slideTImer; 

    function slideShow() { 
      showCanvas = document.getElementById('Canvas1'); 
      showCanvasCtx = showCanvas.getContext('2d'); 

      //clear canvas 
      showCanvasCtx.clearRect(0,0,showCanvas.width,showCanvas.height); 

      //set image size and call switch function 
      img.setAttribute('width','500'); 
      img.setAttribute('height','400'); 
      switchImage(); 

      //start the animation 
      slideTimer = setInterval(switchImage,3000); 
    } 

    function switchImage() { 
     //set img element source property to images in slideshow 
     img.setAttribute('src',imagePaths[currentImage++]); 
      //if past the last image, loop 
      if (currentImage >= imagePaths.length) 
       currentImage = 0; 

      //fade into image by 10th of full saturation 
      showCanvasCtx.globalAlpha = 0.1; 
      revealTimer = setInterval(revealImage,100); 
    } 

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


    function stopSlideShow() { 
     //alert('stop show'); 
     clearInterval(slideTimer); 
     clearInterval(revealTimer); 
     stopShow=1; 
     img.setAttribute('src',100); 

     showCanvas = document.getElementById('Canvas1'); 
      showCanvasCtx = showCanvas.getContext('2d'); 
      showCanvasCtx.globalAlpha=1; 
    }