Canvas基本動畫-循環全景照片

這是MDN上面的一個的例子，展示一個自左向右滑動的全景圖，例子中採用的圖片是一個尺寸大於canvas的圖片

<canvas id="canvas" width="800" height="200" style="background:#f2f2f2"></canvas>
    <script>
    var img = new Image();
    img.src = "images/Capitan_Meadows,_Yosemite_National_Park.jpg";
    var CanvasXSize = 800;
    var CanvasYSize = 200;
    var speed = 30;
    var y = 0;

    //main program
    var dx = 0.75;
    var imgW;
    var imgH;
    var x = 0;
    var clearX;
    var clearY;
    var ctx;

    img.onload = function() {
        imgW = img.width;
        console.log(imgW);
        imgH = img.height;
        if (imgW > CanvasXSize) { 
		x = CanvasXSize - imgW
		clearX = imgW 
		} else {
            clearX = CanvasXSize
        }
        if (imgH > CanvasYSize) { clearY = imgH } else {
            clearY = CanvasYSize
        }
        ctx = document.getElementById("canvas").getContext("2d");

        setInterval(draw, speed)
    }

    function draw() {
        ctx.clearRect(0, 0, clearX, clearY)
        
        // if image is <= Canvas size
        if (imgW <= CanvasXSize) {
		    //reset, start from beginning
            if (x > (CanvasXSize)) { x = 0; }
            //draw aditional image
            if (x > (CanvasXSize - imgW)) { ctx.drawImage(img, x - CanvasXSize + 1, y, imgW, imgH); }
        } else {
		     //reset, start from beginning
            if (x > CanvasXSize) { x = CanvasXSize - imgW }
			 //draw aditional image
            if (x > CanvasXSize - imgW) { ctx.drawImage(img, x - imgW + 1, y, imgW, imgH) }

        }
        //draw image
        ctx.drawImage(img, x, y, imgW, imgH);
		//x值不斷變大
        x += dx
    }

    </script>

代碼解釋：圖片加載完成後，因爲圖片寬度大於畫布的寬度，爲X從新賦值，此時x爲負數，併爲clearX與clearY賦比較大的值，而後間隔執行繪製圖片的函數，繪製圖片時首先清空畫布，根據x的值執行特定的代碼，第一次因爲x是負數，並不知足判斷的條件，只執行ctx.drawImage(img, x, y, imgW, imgH);第二次x的值不斷變大，先執行 ctx.drawImage(img, x - imgW + 1, y, imgW, imgH) ，再執行ctx.drawImage(img, x, y, imgW, imgH);

簡單的圖示

查看動畫效果