canvas漩涡动画效果代码-html代码-BFW代码库

canvas漩涡动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas漩涡动画效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
        html, body{
          overflow: hidden;
          background: #000;
          padding: 0px;
          margin: 0px;
        }
    </style>

 


</head>

<body>
    <canvas id="canvas"></canvas>

    <script >
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        window.onresize = function () {
          w = ctx.canvas.width = window.innerWidth;
          h = ctx.canvas.height = window.innerHeight;
        };window.onresize();
        
        shapes = [];
        class Shape {
          constructor(i, ro, lw, sl, rs, di, hue, an) {
            this.pos = {
              top: {
                x: 0,
                y: -sl / 2 },
        
              left: {
                x: -sl / 2,
                y: 0 },
        
              bot: {
                x: 0,
                y: sl / 2 },
        
              right: {
                x: sl / 2,
                y: 0 } };
        
        
            this.angle = i * an;
            this.start = Date.now();
            this.rotOffset = ro;
            this.rotSpeed = rs;
            this.lineWidth = lw;
            this.sideLength = sl;
            this.direction = di;
            this.hue = hue + i * 3;
          }}
        
        
        function draw() {
          shapes.forEach((shape, i) => {
            if (Date.now() > shape.start + 5000) {
              shapes.splice(i, 1);
              return;
            }
            var pct = (Date.now() - shape.start) / 5000;
            shape.angle += shape.rotSpeed * i;
            ctx.save();
            ctx.translate(w / 2, h / 2);
            if (shape.direction) {
    .........完整代码请登录后点击上方下载按钮下载查看