Canvas生成动画---显示一组彩色气泡

最新推荐文章于 2024-12-05 16:17:37 发布

小木木爸

最新推荐文章于 2024-12-05 16:17:37 发布

阅读量477

点赞数 10

分类专栏：前端小屋文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_15557073/article/details/140720749

版权

一、JS版本

<!--
 * @Author: LYM
 * @Date: 2024-07-26 13:51:47
 * @LastEditors: LYM
 * @LastEditTime: 2024-07-26 16:14:40
 * @Description: Please set Description
-->
<!DOCTYPE html>
<html>
<head>
    <title>canvas动态气泡</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        #jellyCanvas {
            display: block;
            width: 100%;
            height: 100%;
        }

        .container {
          width: 780px;
          height: 780px;
          margin: 0 auto;
          border-radius: 99px;
          filter: blur(64px);
          opacity: 1;
        }
    </style>
</head>
<body>
  <div class="container">
    <canvas id="jellyCanvas"></canvas>
  </div>
    <script>
        // 获取Canvas元素和2D绘图上下文
        const canvas = document.getElementById('jellyCanvas');
        const ctx = canvas.getContext('2d');
        // 定义泡泡数组
        const bubbles = [];
        // 定义泡泡数量
        const numBubbles = 5;
        // 定义泡泡最大半径和最小半径
        const maxRadius = 50;
        const minRadius = 20;
        // 定义泡泡颜色
        const colors = ['#45abb5', '#abb3ff', '#73d4c7', '#abb3ff', '#455ed4'];
        // 定义一个函数来生成随机数
        function random(min, max) {
            return Math.random() * (max - min) + min;
        }

        // 设置2秒完成该动画
        const animationDuration = 2000;
        let startTime;
        // 定义一个构造函数来创建泡泡对象
        function Bubble(x, y, radius, color) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.color = color;
            this.dx = random(-2, 2);
            this.dy = random(-2, 2);
            // 绘制泡泡
            this.draw = function () {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                // ctx.shadowColor = this.color;
                // ctx.shadowBlur = 20;
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            };
            // 更新泡泡位置
            this.update = function () {
                this.x += this.dx;
                this.y += this.dy;
                // 碰撞检测
                if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
                    this.d

最低0.47元/天解锁文章