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、只绘制第一条鱼进去

<