1

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

    }
4

2 回答 2

0

通过 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;
    }
于 2012-04-04T16:24:34.460 回答
0

这是错误的！

showCanvasCtx.canvas.width

画布的对象模型是这样工作的：

画布 -> 上下文

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

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

你应该像这样得到画布的尺寸：

showCanvas.width
showCanvas.height
于 2012-04-03T22:31:51.007 回答