js实现canvas蒲公英漫天飞舞东动画效果代码-html代码-BFW代码库

js实现canvas蒲公英漫天飞舞东动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas蒲公英漫天飞舞东动画效果代码

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

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

<head>

    <meta charset="UTF-8">


    <style>
        body {
        	margin: 0;
        	overflow: hidden;
        }
    </style>


</head>

<body>
    <!-- #CodePenChallenge: Lightness -->
    <canvas width="998" height="722" style="background: linear-gradient(rgb(0, 33, 114), rgb(71, 156, 213));"></canvas>


    <script>
        var canvas = document.querySelector("canvas");
        canvas.style.background = "linear-gradient( to bottom, #002172, #479CD5)";
        const randomInt = (min, max) => Math.floor(Math.random() * (max - min) + min);
        // get canvas
        
        var _w, _h;
        function refreshSize() {
          _w = canvas.width = innerWidth;
          _h = canvas.height = innerHeight;
        }
        refreshSize();
        // set width and height to canvas
        
        var c = canvas.getContext("2d");
        // get context now you can draw from here
        class Flower {
          constructor(x, y, radius) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.dx = 0.8 + Math.random() * 0.2;
            this.fdx = Math.pow(this.dx, 15);
            this.radians = 0;
          }
          draw() {
            let long = this.radius * 20;
            let cutLong = long / 10;
            c.beginPath();
            c.strokeStyle = "#fff";
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
            c.moveTo(this.x, this.y + this.radius);
            c.lineTo(this.x, this.y + long);
            c.stroke();
            c.beginPath();
            c.save();
            c.strokeStyle = "#725527";
            c.lineWidth = cutLong;
            c.lineCap = "round&qu.........完整代码请登录后点击上方下载按钮下载查看