粥六快乐!!
💌 摸鱼时间,点进了充满童年回忆的4399,页面还是那个味道一点也没变。
突发奇想,要不尝试做个4399小游戏玩玩?太复杂的也费事,就整个简单的刮刮乐吧。
✔开整~
分析
🎨 刮刮乐游戏肯定需要两张图片,通过鼠标的移动控制图片的绘制路径
🕐步骤1
- 准备1个canvas容器:
<canvas width="800px" height="600px"></canvas>
🕑 步骤2
- 注册图片
const one = new Image()
one.src = './1.jpg' // 顶部图片
const two = new Image()
two.src = './2.jpg' // 底部图片
🕒 步骤3
- 最核心的是实现擦除效果,鼠标按下擦除,鼠标抬起停止擦除。
- 设置一个标记flag,给canvas设置一个鼠标点击事件,鼠标按下时flag设为true。
🕓 步骤4
- 擦除效果实现:
- 可以在鼠标按下时,将第二张图片绘制到第一张图片的顶上。
实现
// 1. 绘制图片1到canvas中
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
// 2. 创建图片
const one = new Image()
one.src = './1.jpg' // 顶部图片
// 等图片加载完、
one.addEventListener('load', function () {
ctx.drawImage(one, 0, 0, canvas.width, canvas.height)
})
const two = new Image()
two.src = './2.jpg' // 底部图片
// 给canvas注册鼠标移动事件
let flag = false
canvas.addEventListener('mousedown', function () {
// 鼠标按下
flag = true
})
canvas.addEventListener('mousemove', function (e) {
// 实现擦除
if (flag) {
const x = e.offsetX - 5
const y = e.offsetY - 5
// 从第二张图片上绘制一部分到第一张图片
// 从第二张图片中截取20 * 20 的图片绘制到canvas上
ctx.drawImage(two, x, y, 60, 60, x, y, 60, 60)
}
})
canvas.addEventListener('mouseup', function () {
// 鼠标抬起
flag = false
})