使用canvas实现图片轮播抽奖效果，轮播速度由慢到快，然后再到慢

小灰灰 2024-02-21 10:02 5阅读 0赞

整体的效果就是中间的那张图片会连续不断地切换，我部署到github上面了，可以点击链接试一试：[canvas在线抽奖系统效果][canvas]

![76d310e08fe7458fb6bd5095bac90b69.png][]

附上源代码：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
            <style>
                .main {
                    text-align: center;
                }
    
                .reset {
                    display: block;
                    margin: 0 auto;
                }
            </style>
        </head>
        <body>
            <div class="main">
                <div>
                    用Canvas实现图片轮播抽奖效果:
                    轮播速度由慢到快，然后再到慢，最后锁定到中奖目标
                </div>
                <canvas id="myCanvas" width="325" height="445"></canvas>
                <button class="reset" id="reset">重新抽奖</button>
            </div>
            <script>
                // 获取画布
                var canvas = document.getElementById('myCanvas')
    
                // 获取画笔
                var context = canvas.getContext('2d')
                // 画线的时候要有起点和终点
                // const img = new Image()
                let imgSrc = [
                    'https://img-blog.csdnimg.cn/67fc9799ae8e48749e82cf70b179895b.png',
                    'https://img-blog.csdnimg.cn/a5e05258931d480c8f9b3c1f7d5690a0.png',
                    'https://img-blog.csdnimg.cn/7eeba09bd6b54ea098835c84f648ec72.png',
                    'https://img-blog.csdnimg.cn/ba8cec54e8fc4e0193c100470b1eb24d.png',
                    'https://img-blog.csdnimg.cn/88ee56abdc354af79e60b34a6cba9562.png',
                    'https://img-blog.csdnimg.cn/2e23029912544b18ae4559ebdbfa37ff.png',
                    'https://img-blog.csdnimg.cn/0c2caec87e4a46b788f9bc986a2ba290.png',
                    'https://img-blog.csdnimg.cn/cdcfbb8ddcef4b9f8e1c000958cf1e17.png',
                    'https://img-blog.csdnimg.cn/5cc7fdc62c01432299089f008c48ca4d.png',
                ]
                let imgObj = []
                let count = 0
                imgSrc.forEach((imgItem) => {
                    let myImg = new Image()
                    myImg.src = imgItem
                    myImg.onload = () => {
                        count++
                        console.log('图片加载完成')
                        imgObj.push(myImg)
                        if (count === imgSrc.length) {
                            // 开始调用绘制图片的函数
                            startDraw()
                        }
                    }
                })
    
                // 开始绘制图片
                let cur = 1
                let timer = -1
                // 相当于抛物线的最高点
                const maxVal = 12500
                // 触发绘制的概率
                const drawFlag = () => {
                    const y = -5 * cur * cur + 500 * cur
                    const random = Math.round(Math.random() * 5601)
                    console.log('二次方程函数和随机数:', y, random)
                    if (y === 0) {
                        console.log('清除定时器')
                        clearInterval(timer)
                        // 同时设置最后一张中奖图片
                        // const target = new Image()
                        // target.src =
                        //     'https://img-blog.csdnimg.cn/2e23029912544b18ae4559ebdbfa37ff.png'
                        // target.onload = () => {
                        //     context.drawImage(
                        //         target,
                        //         0,
                        //         0,
                        //         canvas.clientWidth,
                        //         canvas.clientHeight
                        //     )
                        // }
                    }
                    if (random <= y) {
                        return true
                    } else {
                        return false
                    }
                }
                const startDraw = () => {
                    console.log('开始绘制图片')
                    let index = 0
                    timer = setInterval(() => {
                        if (index >= imgObj.length) {
                            index = 0
                        }
                        console.log('绘制的图片索引是:', index)
                        if (drawFlag()) {
                            context.drawImage(
                                imgObj[index],
                                0,
                                0,
                                canvas.clientWidth,
                                canvas.clientHeight
                            )
                            cur++
                            index++
                        }
                    }, 100)
                }
    
                const reset = document.querySelector('#reset')
                reset.onclick = () => {
                    console.log('重新开始抽奖')
                    cur = 1
                    startDraw()
                }
            </script>
        </body>
    </html>

[canvas]: https://sjj1024.github.io/douyin-live/assets/8images.html
[76d310e08fe7458fb6bd5095bac90b69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/9013ce3b6cb74b94b22c1b50bfb85296.png