点击全文阅读
文章目录
📚实现效果📚模块实现解析🐇html🐇css🐇javascript
📚实现效果
点击
POWER！后随机抽取幸运签
📚模块实现解析
🐇html
搭框架
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>喵喵大王立大功</title> <link rel="stylesheet" href="./style.css"></head><body> <main id="board"> <!-- 抽签 --> <div class="luck"> <button class="roller">power！</button> <canvas width="250" height="250"></canvas> </div> </main></body><script src="./js/chouqian.js"></script></html>
🐇css
设定了抽签区域的排列、尺寸和位置，以及抽签按钮和Canvas元素的布局（也是主要采用了绝对定位，使得不同视口大小的适配性相对较好）。同时定义了抽签样式的各种视觉效果，包括视觉化按钮点击效果和抽签区域的交互式动画。
.roller类使用了
--前缀定义了三个
自定义属性：
--_color、
--_background和
--_active。这些自定义属性存储了颜色值，而在接下来的样式中使用
var()函数引用这些自定义属性。
* { padding: 0; margin: 0;}/* 整个面板 */#board { position: relative; /* 铺满整个视口 */ width: 100vw; height: 100vh; background-color: #F1EEE7; overflow: hidden;}/* #region抽签 */.luck { width: 250px; height: 350px; display: grid; color: hsl(206 6% 24%); font-family: system-ui; display: inline-block; place-items: center; position: absolute; transform: scale(0.6); aspect-ratio: 1/1; bottom: -7vh; right: 75vw;}.luck > button { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}.luck > canvas { display: block; position: absolute; top: 50px; }.roller { --_color: hsl(0 0% 99%); --_background: hsl(31, 13%, 31%); --_active: hsl(30 40% 30%); font: inherit; font-size: 1rem; color: var(--_color); background: var(--_background); font-weight: 700; text-transform: uppercase; letter-spacing: 0.025rem; border: none; padding: 0.5rem 0.75rem; border-radius: 0.5rem; transition: scale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 50% 100%;}.roller:focus { outline-offset: 0.25rem; outline-color: var(--_background);}.roller:hover{ scale: 0.8; --_background: var(--_active);}/* #endregion抽签 */
🐇javascript
在页面加载完毕后，预先加载了一组图片（因为hexo图片加载实在是慢，而设计的有点作用但不多的挣扎性功能）在加载完成后将其中一张图片（lucky.jpg，也就是猫猫神）绘制到 canvas 中。实现点击 “roller” 事件，随机画抽奖池中的一张到 canvas画布，以实现了一个简单的抽奖效果。
window.onload = function() { var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); // 用于存储预加载的图像 var images = {}; var imageURLs = [ './src/lucky.jpg', './src/1.png', './src/2.png', './src/3.png', './src/4.png', './src/5.png' ]; // 预加载所有图像 var promises = imageURLs.map(function(url) { return new Promise(function(resolve, reject) { var img = new Image(); img.onload = function() { images[url] = img; if (url === './src/lucky.jpg') { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); } resolve(); }; img.src = url; }); }); // 在所有图像都加载完毕后绑定点击事件 Promise.all(promises).then(function() { document.querySelector('.roller').addEventListener('click', function() { var num = Math.floor(Math.random() * 5) + 1; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(images['./src/' + num + '.png'], 0, 0, canvas.width, canvas.height); }); });};
图像预加载：通过 Promise 对象，将每张图片的加载过程封装为一个 Promise，确保当图片加载完成时会执行相应的操作。
依赖管理：通过
Promise.all(promises)，将所有的图像加载Promise对象组合为一个新的Promise对象，确保所有图片都加载完成后再执行后续逻辑。这样可以管理多个异步操作的状态，并在它们都完成后执行特定的操作。图像抽签，通过
随机数生成和
图像命名相配合的方法实现。
点击全文阅读
