canvas的drawImage應用之小魚遊動（4）

這是canvas的drawImage方法對圖片的一個應用
drawImage（obj,sx,sy,sw,sh,dx,dy,dw,dh）方法一共有9個參數，第一個參數看MDN的解釋:

繪製到上下文的元素。容許任何的 canvas 圖像源( CanvasImageSource)，例如： CSSImageValue， HTMLImageElement來操縱 <img> 元素的佈局和圖像.")， SVGImageElement， HTMLVideoElement， HTMLCanvasElement， ImageBitmap 工廠方法模式，它能夠從多種源中生成。 ImageBitmap提供了一種異步且高資源利用率的方式來爲WebGL的渲染準備基礎結構。") 或者 OffscreenCanvas

• 說的很清楚了，能夠是img標籤、svg圖片元素、video標籤、另外一個canvas、base64和屏幕外的canvas（內存裏的）
• 其餘八個參數能夠分爲兩組，第一組標籤分別是:sx，sy，sw，sh;s表示source（源）的意思，也就是對原圖片要從哪一個x，y座標開始畫以及要畫多寬sw和多高sh；同理，下一組的dx，dy，dw，dh，d表示destination（目標點），要畫在canvas裏的哪一個地方dx、dy以及要畫多寬多高dw、dh。

好，這些都瞭解了以後，開始講原理：

來看下面這張圖：
-上面四張圖表示小魚在遊的時候的動做，下面四張圖表示被捕以後的動做，咱們只用上面四張圖，用drawImage不斷的取第一條魚第二條第三條第四條畫在canvas上，畫的時候把前面畫的先清掉，就會有動畫的效果了，咱們要作的就是不斷更新sy（原圖像的y座標）和dx（畫在canvas上的魚的x座標）。

<canvas width="800" height="600" style="background:white;"></canvas>

獲取對象，而後新建一個image對象：

let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let oImg = new Image();
oImg.src = '錄製gif/fish1.png';

因爲咱們在執行drawImage操做的時候oImg可能還沒建立完，因此咱們加個onload，而後用requestAnimationFrame：

oImg.onload = function () {

                requestAnimationFrame(next);//前面有介紹用法

                function next() {
                    gd.drawImage(oImg,//畫魚
                        0, 0, 55, 37,
                        100, 100, 55, 37
                    )
                    requestAnimationFrame(next);
                }
            }

重影了，得先清掉之前畫的：

gd.clearRect(0,0,c1.width,c1.height);

更新sy的值不斷的從上往下取那條小魚，設置一個變量i不斷的++：

let i = 0;
               oImg.onload = function () {
               requestAnimationFrame(next);//前面有介紹用法
                function next() {
                    gd.clearRect(0,0,c1.width,c1.height);
                    i++;
                    gd.drawImage(oImg,//畫魚
                        0, 37*i, 55, 37,
                        100, 100, 55, 37
                    )
                    requestAnimationFrame(next);
                }
            }

咋一閃而過呢？
變量i太大了，圖片就那麼高，讓i==4(第四條魚)的時候歸零：

if(i==4)i=0;

設置一個變量調下速：

window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let gd = c1.getContext('2d');
            let oImg = new Image();
            oImg.src = '錄製gif/fish1.png';

            let i = 0;
            let frameCounter = 0//調速變量

            oImg.onload = function () {

                requestAnimationFrame(next);//前面有介紹用法

                function next() {
                    gd.clearRect(0, 0, c1.width, c1.height);

                    if (frameCounter % 3 == 0) {//每3幀i++
                        i++;
                        if (i == 4) i = 0;
                    }
                    gd.drawImage(oImg,//畫魚
                        0, 37 * i, 55, 37,
                        100, 100, 55, 37
                    )
                    frameCounter++;
                    requestAnimationFrame(next);
                }
            }
        }

正常了
而後讓他動起來，設置一個變量x：

window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let gd = c1.getContext('2d');
            let oImg = new Image();
            oImg.src = '錄製gif/fish1.png';

            let i = 0;
            let frameCounter = 0//調速變量
            let x=100;//讓魚動起來

            oImg.onload = function () {

                requestAnimationFrame(next);//前面有介紹用法

                function next() {
                    gd.clearRect(0, 0, c1.width, c1.height);
                    x+=2;//調節魚遊動的速度
                    if (frameCounter % 3 == 0) {//每3幀i++
                        i++;
                        if (i == 4) i = 0;
                    }
                    
                    gd.drawImage(oImg,//畫魚
                        0, 37 * i, 55, 37,
                        x, 100, 55, 37
                    )
                    frameCounter++;
                    requestAnimationFrame(next);
                }
            }
        }

最後能夠加個鼠標點擊頁面而後小魚暫停，再點擊在動的事件：
這裏我就不一步步教寫了，核心的就是上面的部分，下面是完整的代碼：

window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let gd = c1.getContext('2d');
            let oImg = new Image();
            oImg.src = '錄製gif/fish1.png';

            let i = 0, x = 100;
            let frameCounter = 0;

            let pause = false;//控制是否暫停

            function move(pause) {//小魚運動函數
                gd.clearRect(0, 0, c1.width, c1.height);
                if(!pause){//暫停了就不更新x的值,不讓他遊
                    x += 2;
                }
                if (frameCounter % 3 == 0) {//控制小魚遊動速度
                    i++;//控制小魚擺動速度
                    if (i == 4) i = 0;//循環擺動
                }
                gd.drawImage(oImg,//畫魚
                    0, 37 * i, 55, 37,
                    x, 100, 55, 37
                )
                frameCounter++;
            }
            oImg.onload = function () {

                requestAnimationFrame(next);//前面有介紹用法

                function next() {

                    if (!pause) {//若是沒點暫停，小魚就運動
                        move()
                    }
                    else {//點了就不遊動，只擺動
                        move(pause);
                    }
                    requestAnimationFrame(next);
                }
            }
            document.onclick = function () {
                pause = !pause;//點擊頁面切換暫停或繼續
            }

        }

效果就是第一張圖