UNIAPP小程序内Canvas下雪特效，解决蓝色雪花问题

在小程序的开发中，如何为用户带来与众不同的体验一直是开发者关注的焦点。尤其是在冬季，给小程序加入一个浪漫的下雪特效，不仅能增强用户的互动体验，还能提升整体的应用氛围。今天，我们将介绍如何利用 UNIAPP 和 Canvas 技术，在小程序中实现一个炫酷的下雪特效。

效果图

小程序案例：五行查穿衣

如何在UNIAPP中实现下雪特效？

以下是实现下雪特效的简要步骤：

1. 准备Canvas元素
   首先，在小程序页面的 <template> 中添加一个Canvas元素

<template>
    <view class="container">
        <canvas canvas-id="snow-canvas" class="snow-canvas"></canvas>
    </view>
</template>

2.初始化Canvas并绘制雪花
在页面的 onReady 生命周期中，获取Canvas的上下文，并不断绘制和更新雪花的状态，创造出流畅的下雪效果。

<script>
    export default {
        onReady() {
            this.initSnow();
        },
        methods: {
            initSnow() {
                const canvas = uni.createCanvasContext('snow-canvas', this);
                const systemInfo = uni.getSystemInfoSync();
                let WIDTH = systemInfo.windowWidth;
                let HEIGHT = systemInfo.windowHeight;
 
                let quantity = 80;
                let particles = [];
                for (let i = 0; i < quantity; i++) {
                    particles.push({
                        x: Math.random() * WIDTH,
                        y: Math.random() * HEIGHT,
                        r: Math.random() * 4 + 1,
                        d: Math.random() * quantity
                    });
                }
 
                let angle = 0.005;
 
                function draw() {
                    canvas.clearRect(0, 0, WIDTH, HEIGHT);
                    canvas.setFillStyle("rgba(255, 255, 255, 1)");
                    for (let i = 0; i < quantity; i++) {
                        const p = particles[i];
                        canvas.setFontSize(p.r * 7);
                        canvas.fillText("❄️", p.x, p.y);
                    }
                    update();
                    canvas.draw();
                }
 
                function update() {
                    angle += 0.005;
                    for (let i = 0; i < quantity; i++) {
                        const p = particles[i];
                        p.y += Math.cos(angle + p.d) + p.r / 2;
                        p.x += Math.sin(angle) / 3;
                        if (p.x > WIDTH + 10 || p.x < -30 || p.y > HEIGHT + 30) {
                            if (i % 9 > 0) {
                                particles[i] = {
                                    x: Math.random() * WIDTH,
                                    y: -30,
                                    r: p.r,
                                    d: p.d
                                };
                            } else {
                                if (Math.sin(angle) > 0) {
                                    particles[i] = {
                                        x: -30,
                                        y: Math.random() * HEIGHT,
                                        r: p.r,
                                        d: p.d
                                    };
                                } else {
                                    particles[i] = {
                                        x: WIDTH + 10,
                                        y: Math.random() * HEIGHT,
                                        r: p.r,
                                        d: p.d
                                    };
                                }
                            }
                        }
                    }
                }
 
                function runtime() {
                    draw();
                    setTimeout(runtime, 1000 / 60); // 60fps
                }
 
                runtime();
            }
        }
    }
</script>

3.CSS

.container {
        position: relative;
        width: 100%;
        height: 100%;
    }
 
    .snow-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

注意：canvas.fillText(“❄️”, p.x, p.y);这里雪花可以用输入法打出来，但是，颜色不生效，总是蓝色的，解决办法就是替换成图片，找个白色图片轻松解决

通过上面的步骤，我们成功地在 UNIAPP 小程序中实现了一个简单而美丽的下雪特效。这个特效不仅能为用户提供视觉上的享受，还能为节日营销、产品推广等场景增添一份独特的魅力。如果你也想让你的应用充满冬日浪漫，不妨尝试将下雪特效加入到你的项目中吧！

让每一片雪花都成为用户心中的暖意。