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

キャンバスのオブジェクト モデルは次のように機能します。

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

幅と高さのパラメーターは Context ではなく、Canvas 自体にあります。したがって、コードで次のように取得したと考えてください。

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

次のようにキャンバスの寸法を取得する必要があります。

showCanvas.width
showCanvas.height
于 2012-04-03T22:31:51.007 に答える