持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情
前言
今天一位前端的同事给了我一个html文件，让我打开看看效果。里面的效果如下：
通过按键盘的方向键来控制人物的移动，感觉挺有趣的，就问她是不是切换图片来实现人物移动的，她跟我说这是一张图片而已，用的canvas标签实现的。
那就有意思来，这不得了解了解，话不多说，赶紧行动起来！
简介
Canvas API（画布） 是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。
Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
用法
通过 Canvas 对象的getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。更多详细用法，请参考Canvas参考手册。
// 1.获取画布
let Canvas = document.querySelector('.myCanvas')
// 2.获取画布上下文
let ctx = Canvas.getContext('2d')
// 3.在画布上绘制图像、画布或视频
ctx.drawImage(img,x,y,width,height)
// 4.清空给定矩形内的指定像素
ctx.clearRect(x,y,width,height)
代码实现
body
首先，我们需要定义一个 canvas 标签，用于展示内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘右键run</title>
</head>
<body>
<canvas class="myCanvas" width="600" height="400" style="border:1px solid #000000;"></canvas>
</body>
</html>
script
画布有了，接下来就是要引入图片，并让其动起来了。具体的实现看下面代码：
<script>
// 1.获取画布
let Canvas = document.querySelector('.myCanvas')
// 2.获取画布上下文
let ctx = Canvas.getContext('2d')
// 3.定义图片对象
let img = new Image()
img.src = "https://img2020.cnblogs.com/blog/1608043/202004/1608043-20200411105700980-2076258756.png"
// 4.定义onload事件
img.onload = function () {
ctx.drawImage(img, 0, 0, 132, 271, 250, 50, 132, 271)
}
// 移动的指针
let index = 0
// 5.添加监听事件
document.addEventListener('keydown', function (e) {
// 清除画布
ctx.clearRect(250, 50, 132, 271)
// 监听按键来移动图片的区间，39等于右，37等于左
if (e.keyCode === 39) {
index++
}else if(e.keyCode == 37){
index--;
}
// 边界处理
if (index === 4) {
index = 0
}else if(index == -1){
index = 3
}
// 重新渲染画布
ctx.drawImage(img, index * 132, 0, 132, 271, 250, 50, 132, 271)
})
</script>
通过不断的清除并重新渲染，即可实现人物的移动效果了。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘右键run</title>
</head>
<body>
<canvas class="myCanvas" width="600" height="400" style="border:1px solid #000000;"></canvas>
</body>
<script>
let Canvas = document.querySelector('.myCanvas') //1.获取画布
let ctx = Canvas.getContext('2d')//2.获取画布上下文
let img = new Image()
img.src = "https://img2020.cnblogs.com/blog/1608043/202004/1608043-20200411105700980-2076258756.png"
img.onload = function () {
ctx.drawImage(img, 0, 0, 132, 271, 250, 50, 132, 271)
}
let index = 0
document.addEventListener('keydown', function (e) {
ctx.clearRect(250, 50, 132, 271)
if (e.keyCode === 39) {
index++
}else if(e.keyCode == 37){
index--;
}
if (index === 4) {
index = 0
}else if(index == -1){
index = 3
}
ctx.drawImage(img, index * 132, 0, 132, 271, 250, 50, 132, 271)
})
</script>
</html>
