drawImage有三种不同的使用方式,三参数、五参数、九参数形式
gd.drawImage(oImage,dx,dy);//在画布上定位图像: 第一个参数表示要绘制的图片,第二三个参数表示要绘制到 canvas 的哪个坐标
gd.drawImage(img,dx,dy,dw,dh);//在画布上定位图像,并规定图像的宽度和高度 img:表示要绘制的图片 dx,dy,dw,dh 表示要放在canvas里面的 位置 和 宽高
gd.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);//剪切图像,并在画布上定位被剪切的部分 img:表示要绘制的图片, sx,sy,sw,sh 分别表示源的左上角坐标和 宽高,dx,dy,dw,dh 表示要放在canvas里面的 位置 和 宽高
drawImage() 方法在画布上绘制图像、画布或视频

游戏行走图动画制作

这里需要一张图片

pic
行走图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas-绘制图像</title>
<style>
body{background:#000;text-align: center;}
#canvas1{background-color: white;}
</style>
</head>
<body>
<canvas id="canvas1" width="800" height="800" >
您的浏览器不支持 canvas
</canvas>
<script>
function d2a(d) {
return d*Math.PI/180;
}
window.onload = function() {
let c1 = document.getElementById("canvas1");
let gd = c1.getContext("2d");
let oImage = new Image();
oImage.src = 'google.png';
//注意:这里要在图片加载完成过后再将其绘制到画布上去
// oImage.onload = function() {
// gd.drawImage(oImage,0,0);//三参数,精简版的
// };

//九个参数-完整版本gd.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
//1:img, 2,3,4,5 分别表示源的左上角坐标和 宽高,6,7,8,9 表示要放在canvas里面的位置和 宽高
// oImage.onload = function() {
// gd.drawImage(oImage,759,177,74,112,100,100,74,112);//九参数版的drawImage()
// };

//游戏行走图
let oImage1 = new Image();
oImage1.src = 'xinzou.png';
oImage1.onload = function() {
let frame = 0;
let dir = 'd'//方向
let keys = {37:'l',38:'u',39:'r',40:'d'};//上下左右键
let dx = 100,dy = 100;
let speed = 5;//速度
document.onkeydown = function(ev) {
dir = keys[ev.keyCode] || 'd';
};

setInterval(function() {
gd.clearRect(0,0,c1.width,c1.height);
let row = {'d':0,'l':1,'r':2,'u':3};
gd.drawImage(oImage1,85*frame,(40+89)*row[dir],85,89,dx,dy,85,89);
frame++;
if (frame>3) frame = 0;
switch(dir) {
case 'l':
dx -= speed;
break;
case 'r':
dx += speed;
break;
case 'u':
dy -= speed;
break;
case 'd':
dy += speed;
break;
}
},100);
};
};
</script>
</body>
</html>

效果图如下

  • 利用上下左右箭头可以控制小人行走的方向

pic