Question

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

画布的对象模型以这种方式工作：

画布 - ＆gt;上下文

width和height参数不在Context中，而在Canvas本身中。所以，考虑到你在代码中以这种方式得到它们：

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

HTML5画布幻灯片放映问题

2 个答案: