canvas 多彩多形状雪花下雪动画效果代码-html代码-BFW代码库

canvas 多彩多形状雪花下雪动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas 多彩多形状雪花下雪动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        #canvas1 {              
                                position:absolute;
                                top: 0;
                                left: 0;
                        }
                        #animationCanvas {              
                                position:absolute;
                                top: 0;
                                left: 0;
                                background: black;
                        }
    </style>




</head>

<body>
    <canvas id='animationCanvas'></canvas>
    <canvas id='canvas1'></canvas>


    <script>
        window.addEventListener('load', function(){
            const canvas = document.getElementById('canvas1');
            const ctx = canvas.getContext('2d');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        
                const animationCanvas = document.getElementById('animationCanvas');
            const animationCtx = animationCanvas.getContext('2d');
            animationCanvas.width = window.innerWidth;
            animationCanvas.height = window.innerHeight;
        
            ctx.lineCap = 'round';
            ctx.shadowColor = 'black';
            ctx.shadowOffsetX = 20;
            ctx.shadowOffsetY = 20;
            ctx.shadowBlur = 10;
        
            class Fractal {
                #ctx;
                #width;
                #height;
                constructor(ctx, width, height){
                    this.#ctx = ctx;
                    this.#width = width;
                    this.#height = height;
                    this.size = this.#width < this.#height ? this.#width * 0.4 : this.#height * 0.4;
                    this.maxLevel = 3;
                    this.branches = 5;
        
                    this.sides = Math.floor(Math.random() * 7 + 4);
                    this.scale = Math.random() * 0.2 + 0.2;
                    this.spread = Math.random() * Math.PI;
                    this.color = 'hsl(' + Math.random() * 360 + ', 100%, 50%)';
                    this.lineWidth = Math.random() * 20 + 10;
                }
                #drawLine(level){
                    if (level > this.maxLevel) return;
                    this.#ctx.strokeStyle = this.color;
                    this.#ctx.beginPath();
                    this.#ctx.moveTo(0, 0);
     .........完整代码请登录后点击上方下载按钮下载查看