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>