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);
                    this.#ctx.lineTo(this.size, 0);
                    this.#ctx.stroke();
                    for (let i = 0; i < this.branches; i++){
                        this.#ctx.save();
                        this.#ctx.translate((this.size * i)/this.branches, 0);
                        this.#ctx.scale(this.scale, this.scale);
        
                        this.#ctx.save();
                        this.#ctx.rotate(this.spread);
                        this.#drawLine(level + 1);
                        this.#ctx.restore();
        
                        this.#ctx.save();
                        this.#ctx.rotate(-this.spread);
                        this.#drawLine(level + 1);
                        this.#ctx.restore();
        
                        this.#ctx.restore();
                    }
                }
                draw(){
                    this.#randomize();
                    this.#ctx.clearRect(0,0,this.#width, this.#height);
                    this.#ctx.lineWidth = this.lineWidth;
                    this.#ctx.save();
                    this.#ctx.translate(this.#width * 0.5, this.#height * 0.5);
                    for (let i = 0; i < this.sides; i++){
                 .........完整代码请登录后点击上方下载按钮下载查看