H5 canvas基礎入門到捕魚達人小遊戲實現(5)drawImage的應用

不知不覺，這已經是第五篇canvas系列文章了， 課時我們依然沒有講捕魚遊戲，今天這節我們主要講canvas是如何處理圖片的，這節講完了，我們就可以正式開始編寫捕魚遊戲了。

圖片處理 drawImage

1、context.drawImage(image,x,y)
x:繪製圖像的x座標
y:繪製圖像的y座標

2、context.drawImage(image,x,y,w,h);
x:畫在canvas的x座標
y:畫在canvas的y座標
w:繪製圖像的寬度
h:繪製圖像的高度

3、context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
sx:圖像上的x座標
sy:圖像上的y座標
sw:矩形區域的寬度
sh:矩形區域的高度
dx:畫在canvas的x座標
dy:畫在canvas的y座標
dw:畫出來的寬度
dh:畫出來的高度

繪製圖片

我們把這張圖片繪製到canvas畫布上

1、整張圖片繪製

var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');
    var oImg = new Image();
    oImg.src = "https://img-blog.csdn.net/20171230163702723?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzI1MTQwNDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast";
    oImg.onload=function(){
        gd.drawImage(oImg,0,0);
    }

2、只繪製第一條魚進去

var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');
    var oImg = new Image();
    oImg.src = "https://img-blog.csdn.net/20171230163702723?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzI1MTQwNDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast";
    oImg.onload=function(){
        gd.drawImage(oImg,0,0,52,77,0,0,52,77);
    }

看看效果圖：

3、假設開上定時器，依次繪製第一條魚，第二條魚，第三條魚…… 先看看效果圖

感覺上已經是一條活魚了
看看代碼吧：

var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');
    var oImg = new Image();
    oImg.src = "fish4.png";
    oImg.onload=function(){
        var w = 59;
        var h = 77;
        var sx = 0;
        var sy = 0;
        var x = 300;
        setInterval(function(){
            gd.clearRect(0,0,oC.width,oC.height);//先清除畫布

            gd.save();//先保存下繪製前畫布的狀態

            gd.translate(x,0);//畫布X軸位移300
            gd.rotate(d2a(90));//畫布旋轉90deg (角度轉換成弧度)

            gd.drawImage(
                oImg,
                sx,sy,w,h,
                300,200,w,h
            );

            gd.restore();//每繪製完一幀之後，恢復到畫布之前的狀態
        },30);
        setInterval(function(){
            sx+=59;//圖片上的x座標，每次下移一條魚的距離，當大於等於第四條魚的時候恢復到第一條魚的位置
            if(sx>=w*4){
                sx = 0;
            }
        },120);
    };
    //角度轉弧度的公式
    function d2a(n){
        return n*Math.PI/180;
    }

4、假設讓魚沿着直線忘前走呢？
我們來嘗試改變下gd.translate(x,0)中x的值試試
先看看效果圖：

這儼然已經是一條活魚啦…

看看代碼：

var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');
    var oImg = new Image();
    oImg.src = "fish4.png";
    oImg.onload=function(){
        var w = 59;
        var h = 77;
        var sx = 0;
        var sy = 0;
        var x = 300;
        var speedX = 2;
        setInterval(function(){

            x+=speedX;//添加了一個遞增值

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

            gd.save();

            gd.translate(x,0);
            gd.rotate(d2a(90));

            gd.drawImage(
                oImg,
                sx,sy,w,h,
                300,200,w,h
            );

            gd.restore();
        },30);
        setInterval(function(){
            sx+=59;
            if(sx>=w*4){
                sx = 0;
            }
        },120);
    };
    function d2a(n){
        return n*Math.PI/180;
    }

已經可以讓一條魚在canvas畫布中來回遊動了，離我們的捕魚越來越近了，具體捕魚項目會在下一篇文章中開始。所以接下來把canvas中渲染圖片的剩下的api講完。

圖片平鋪

先看看api

context.createPattern(image,type);
type:
    no-repeat 不平鋪
    repeat-x：橫向平鋪
    repeat-y：縱向平鋪
    repeat：全方向平鋪

實例代碼：

var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
var oImg = new Image();
oImg.src = 'https://img-blog.csdn.net/20171230163702723?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzI1MTQwNDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast';
oImg.onload = function(){
    var cp = gd.createPattern(oImg,'repeat');
    gd.fillStyle = cp;
    gd.fillRect(0,0,oC.width,oC.height);//這裏設置多大表示圖片繪製區域有多大
}

看看效果圖：

圖像剪裁

1、設置區域
2、剪裁
實例代碼：

var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');
    // 剪切矩形區域
    gd.rect(50,20,200,120);
    gd.stroke();
    gd.clip();
    // 在 clip() 之後繪製綠色矩形
    gd.fillStyle="green";
    gd.fillRect(0,0,150,100);//只有剪裁區域內纔會有綠色出現

實例圖片：

剪裁區域內纔出現綠色。

生成圖片

api

canvas.toDataURL():保存canvas畫布爲一張圖片(數據格式是base64形式的)，可以直接使用img標籤進行展示

實例代碼：

var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');
    gd.fillStyle = 'red';
    gd.fillRect(oC.width/2,oC.height/2,100,100);
    oC.onclick=function(){
        var oImg = new Image();
        oImg.src = oC.toDataURL();
        document.body.appendChild(oImg);
    };

點擊畫布的時候生成一張圖片插入到body中，這裏就不截圖演示了；

到此canvas的基礎api已經講的差不多了，下篇文章則開始捕魚項目的編寫，期待吧