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://oscdn.geek-share.com/Uploads/Images/Content/202010/16/34cc407fb38a940c041de10e418b1fca";
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://oscdn.geek-share.com/Uploads/Images/Content/202010/16/34cc407fb38a940c041de10e418b1fca";
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的值试试

先看看效果图：


<
4000
/p>

这俨然已经是一条活鱼啦…

看看代码：

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://oscdn.geek-share.com/Uploads/Images/Content/202010/16/34cc407fb38a940c041de10e418b1fca';
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已经讲的差不多了，下篇文章则开始捕鱼项目的编写，期待吧