Javascript HTML5画布幻灯片放映问题

我有一个幻灯片，我通过一个链接的呼叫触发。幻灯片效果很好。我在停止和清除幻灯片时遇到问题。我有一个临时链接，我正在调用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);

    }

这是错误的

showCanvasCtx.canvas.width

画布的对象模型的工作方式如下：

画布->上下文

宽度和高度参数不在上下文中，而是在画布本身中。因此，考虑到您在代码中采用了这种方式：

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

您应该获得画布的尺寸，如下所示：

showCanvas.width
showCanvas.height

// 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;
    }

通过删除

if（！stopShow）{

调用，并清除stopSlideShow函数中的画布，该函数将按需要工作。必须在stopSlideShow函数中将globalAlpha设置为1。结束代码如下所示：

showCanvas.width
showCanvas.height

// 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;
    }

---

我解决了这个问题。我无法回答我自己的问题。我想发布答案，以防它能帮助其他人。我将在明天发布答案。