前端 | 猫猫神幸运签抽签！！

文章目录

• 实现效果
• 模块实现解析
• • html
  • css
  • javascript

    实现效果

    • 点击POWER！后随机抽取幸运签

      模块实现解析

      html

      • 搭框架

                    喵喵大王立大功                                  power！                       

        css

        • 设定了抽签区域的排列、尺寸和位置，以及抽签按钮和Canvas元素的布局（也是主要采用了绝对定位，使得不同视口大小的适配性相对较好）。
        • 同时定义了抽签样式的各种视觉效果，包括视觉化按钮点击效果和抽签区域的交互式动画。
        • .roller类index.php/tags-602.html" >使用了--前缀定义了三个自定义属性：--_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对象，确保所有图片都加载完成后再执行后续逻辑。这样可以管理多个异步操作的状态，并在它们都完成后执行特定的操作。
          • 图像抽签，通过随机数生成和图像命名相配合的方法实现。