换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客。最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏。
知识点
- canvas绘制背景
- canvas绘制图片
- canvas绘制边框
- canvas事件处理
- canvas简单动画制作
步骤
1、准备好图片,首先是机器的外观、以及滚动的奖项图片,我一共准备了6种,奖项图片按照一定的规律命名,这样方便处理
2、准备好canvas画布,设置好基本的CSS样式,完成以后大概是这样子。
PS:这里我设置了canvas的背景色,方便看到效果,完成品会去掉背景色,因为背景我们要设置成机器
3、计算好位置,绘制背景图、以及奖励项目边框,绘制完大概是这样子
PS:要注意的一点是,绘制背景要等到图片加载完才能绘制(这不是废话吗!),绘制边框要等到背景绘制完,不然会被覆盖掉。
4、绘制奖项图片,位置和边框位置一致,完成效果大致是这样
5、加上点击事件、点击开启关闭切换,完成效果见顶部,done!
待优化
奖项切换的效果没有实现,就是奖励上下滚动的效果
总结
试水canvas,蛮有趣的,打开了新世界的大门。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>SlotMachine</title> <style> body { background: gray; } #test { background: #fff; width: 100%; max-width: 551px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <canvas id="test" width="533" height="411"> 您的浏览器不支持Canvas,现在都什么年代了 </canvas> <script> ; (function () { let canvas = document.querySelector('#test'); //引入缩放比例计算,兼容多种终端 let scaling = { w: canvas.clientWidth / canvas.width, h: canvas.clientHeight / canvas.height }; if (canvas.getContext) { let ctx = canvas.getContext('2d'); let bg = new Image(); let imgs = { left: new Image(), middle: new Image(), right: new Image() }; let flag = { left: 1, middle: 1, right: 1, max: 6 }; let ps = { left: [70, 160], middle: [185, 160], right: [295, 160] }; let interval = 1000 / 10; let timer = { left: null, middle: null, right: null }; //绘制图片 function drawImg(img, x, y) { ctx.drawImage(img, x, y, img.width, img.height); } //绘制背景 function drawBg(img) { let pattern = ctx.createPattern(img, 'no-repeat'); ctx.fillStyle = pattern; ctx.fillRect(0, 0, 533, 411); } //绘制图片边框 function drawBorder(x, y, w, h) { ctx.save(); ctx.strokeStyle = '#000000'; ctx.lineWidth = 4; ctx.strokeRect(x, y, w, h); ctx.restore(); } //判断点击是否在图片范围内 function isPointInPath(x, y, x1, y1) { return x <= x1 && x + 100 >= x1 && y <= y1 && y + 100 >= y1; } //动画开始 function start(key) { timer[key] = setInterval(function () { flag[key] === flag.max ? flag[key] = 1 : flag[key]++; imgs[key].src = './img/slot' + flag[key] + '.png'; }, interval); } //动画停止 function stop(key) { clearInterval(timer[key]); timer[key] = null; } //初始化 function init() { bg.src = './img/machine.png'; bg.onload = () => { drawBg(bg); drawBorder(ps.left[0], ps.left[1], 100, 100); drawBorder(ps.middle[0], ps.middle[1], 100, 100); drawBorder(ps.right[0], ps.right[1], 100, 100); imgs.left.src = './img/slot6.png'; imgs.left.onload = () => { drawImg(imgs.left, ps.left[0], ps.left[1]); }; imgs.middle.src = './img/slot6.png'; imgs.middle.onload = () => { drawImg(imgs.middle, ps.middle[0], ps.middle[1]); }; imgs.right.src = './img/slot6.png'; imgs.right.onload = () => { drawImg(imgs.right, ps.right[0], ps.right[1]); }; }; canvas.addEventListener('click', function (e) { //引入缩放比例计算,兼容多种终端 let x1 = e.offsetX / scaling.w; let y1 = e.offsetY / scaling.h; for (let key in ps) { if (ps.hasOwnProperty(key)) { let item = ps[key]; if (!isPointInPath(item[0], item[1], x1, y1)) continue; if (timer[key]) { stop(key); } else { start(key); } } } }); } init(); } })(); </script> </body> </html>