HTML5绘制彩色圆圈动画特效

原创 已于 2025-06-27 11:27:24 修改 · 661 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#特效 #html

于 2025-06-14 13:34:53 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5绘制彩色圆圈动画特效</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        canvas {
            display: block;
        }

        .controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        button {
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        button:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .hidden-link {
            position: absolute;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.3);
            font-size: 12px;
            text-decoration: none;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <canvas id="circleCanvas"></canvas>
    
    <div class="controls">
        <button id="addCircle">添加圆圈</button>
        <button id="clearCircles">清除所有</button>
    </div>
    

    <script>
        const canvas = document.getElementById('circleCanvas');
        const ctx = canvas.getContext('2d');
        const addBtn = document.getElementById('addCircle');
        const clearBtn = document.getElementById('clearCircles');
        
        // 设置画布大小为窗口大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        // 圆圈数组
        const circles = [];
        const colors = [
            '#FF5F5F', '#FF9F5F', '#FFDF5F', 
            '#5FFF5F', '#5FDFFF', '#5F5FFF', 
            '#DF5FFF', '#FF5FDF'
        ];
        
        // 圆圈类
        class Circle {
            constructor(x, y) {
                this.x = x || Math.random() * canvas.width;
                this.y = y || Math.random() * canvas.height;
                this.radius = 5;
                this.maxRadius = 50 + Math.random() * 100;
                this.color = colors[Math.floor(Math.random() * colors.length)];
                this.growthRate = 0.5 + Math.random() * 2;
                this.opacity = 0;
                this.targetOpacity = 0.7 + Math.random() * 0.3;
                this.lifePhase = 0; // 0: 出现, 1: 稳定, 2: 消失
                this.speedX = (Math.random() - 0.5) * 2;
                this.speedY = (Math.random() - 0.5) * 2;
                this.rotation = Math.random() * Math.PI * 2;
                this.rotationSpeed = (Math.random() - 0.5) * 0.02;
            }
            
            update() {
                // 移动
                this.x += this.speedX;
                this.y += this.speedY;
                
                // 边界检查
                if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
                if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
                
                // 旋转
                this.rotation += this.rotationSpeed;
                
                // 生命周期处理
                if (this.lifePhase === 0) {
                    // 出现阶段
                    this.opacity += 0.02;
                    if (this.opacity >= this.targetOpacity) {
                        this.lifePhase = 1;
                    }
                } else if (this.lifePhase === 2) {
                    // 消失阶段
                    this.opacity -= 0.02;
                    if (this.opacity <= 0) {
                        const index = circles.indexOf(this);
                        if (index > -1) {
                            circles.splice(index, 1);
                        }
                        return false;
                    }
                }
                
                // 生长
                if (this.radius < this.maxRadius && this.lifePhase === 0) {
                    this.radius += this.growthRate;
                }
                
                return true;
            }
            
            draw() {
                ctx.save();
                ctx.translate(this.x, this.y);
                ctx.rotate(this.rotation);
                
                // 绘制圆圈
                ctx.beginPath();
                ctx.arc(0, 0, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.globalAlpha = this.opacity;
                ctx.fill();
                
                // 绘制内部装饰
                ctx.beginPath();
                ctx.arc(0, 0, this.radius * 0.7, 0, Math.PI * 2);
                ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
                ctx.lineWidth = 2;
                ctx.globalAlpha = this.opacity * 0.8;
                ctx.stroke();
                
                // 绘制中心点
                ctx.beginPath();
                ctx.arc(0, 0, this.radius * 0.2, 0, Math.PI * 2);
                ctx.fillStyle = 'white';
                ctx.globalAlpha = this.opacity * 0.6;
                ctx.fill();
                
                ctx.restore();
            }
        }
        
        // 动画循环
        function animate() {
            // 半透明背景创造拖尾效果
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 更新和绘制所有圆圈
            circles.forEach(circle => {
                circle.update();
                circle.draw();
            });
            
            requestAnimationFrame(animate);
        }
        
        // 添加新圆圈
        function addCircle(x, y) {
            circles.push(new Circle(x, y));
            
            // 限制最大圆圈数量
            if (circles.length > 50) {
                // 找到最早添加的圆圈并标记为消失
                for (let i = 0; i < circles.length; i++) {
                    if (circles[i].lifePhase === 1) {
                        circles[i].lifePhase = 2;
                        break;
                    }
                }
            }
        }
        
        // 清除所有圆圈
        function clearAllCircles() {
            circles.forEach(circle => {
                circle.lifePhase = 2;
            });
        }
        
        // 处理窗口大小变化
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
        
        // 点击添加圆圈
        canvas.addEventListener('click', (e) => {
            addCircle(e.clientX, e.clientY);
        });
        
        // 按钮事件
        addBtn.addEventListener('click', () => {
            addCircle();
        });
        
        clearBtn.addEventListener('click', clearAllCircles);
        
        // 初始添加一些圆圈
        for (let i = 0; i < 10; i++) {
            addCircle();
        }
        
        // 开始动画
        animate();
    </script>
</body>
</html>

ziblog
关注
HTML5绘制彩色圆圈动画特效特效代码
03-20
在这个"HTML5绘制彩色圆圈动画特效特效代码"中，我们探讨的是如何利用HTML5的Canvas API来创建一个令人瞩目的视觉效果——彩色圆圈粒子的交叉游动动画。 Canvas是HTML5中的一个核心元素，它提供了一个二维的画布，...
HTML5绘制彩色圆圈动画特效.zip
07-04
本教程将深入探讨如何利用HTML5的Canvas API来创建一个彩色圆圈动画特效。 首先，Canvas是HTML5中的一个绘图元素，通过JavaScript来控制其画布上绘制的每一像素。它允许开发者动态生成图形，包括线条、形状、图像...
【HTML5】svg 绘制图形
qq_45677671的博客
06-30 5475
SVG 绘制图形教程
html画圆圈原理,【已解决】HTML中用Canvas画圆圈
weixin_35899665的博客
05-30 497
折腾：【未解决】vuejs的vue-admin-template中自己手动实现画出类似电路图的控制面板图期间，再去canvas中圆圈如图：希望画出大大小小的各种圆圈包括圆圈里面还带东西的。ctx.lineWidth = 1ctx.beginPath()ctx.arc(LeftLineXHalf, TopLineY + 20, 5, -Math.PI, Math.PI, false)ctx.stro...
html5 circle css,circle() | CSS属性参考
weixin_29279153的博客
06-18 2262
CSS circle()函数是一个图形函数，用于指定某种基本图形类型。CSS 代表一种基本图形，它通过图形函数来定义一个图形。一个基本图形可以作为shape-outside属性，或clip-path属性的参数使用，经这些属性应用在一个元素上，可以使这个元素周围的内容环绕在它的周围，或者使用指定的图形来剪裁内容。circle()函数的语法如下：circle() = circle( []? [at ]...
html5 circle,HTML5 Canvas Circle Text
weixin_32327615的博客
06-18 189
On my blog, I take a fairly close look at creating circular text using HTML5 Canvas:blog.graphicsgen.comIn the example, options include rounded text alignment (left, center and right) from a given ang...
HTML5 Canvas彩色圆圈粒子动画特效
HTML5绘制彩色圆圈动画特效是一款典型的基于Canvas与JavaScript结合实现的前端视觉动画效果，广泛应用于网页设计、交互式界面以及数字艺术展示中。该特效的核心在于利用HTML5中的Canvas元素作为绘图容器，通过...
HTML5 canvas彩色圆圈动画特效实现教程
在本知识点中，我们将深入探讨如何使用HTML5的Canvas API来绘制彩色圆圈动画特效，这涉及到JavaScript编程、HTML和Canvas的使用。 首先，我们需要了解HTML5 Canvas元素的基本概念。Canvas是一个HTML元素，通过它...
H5 Canvas彩色圆圈旋转动画特效
06-24
在“彩色圆圈旋转动画特效”中，Canvas被用来绘制一个圆形的路径，这个路径可以是空心的也可以是实心的，然后通过改变路径的颜色和位置来模拟旋转效果。 CSS3的animation属性是关键所在，它使得元素可以按照指定的...
HTML5 canvas性能之画圈
09-10 759
主要讲了HTML5 canvas性能方面的尝试，场景是在canvas上面绘制圆圈。 我一直在尝试使用HTML5 canvas在圣诞树图片上面绘制泡泡。由于不知道哪种绘制的方法最好，最终在Stack Overflow上找到了使用radial gradients（辐射渐变）绘制圆圈的答案。 圆圈 你可能已经知道，标准地画圆圈的方法是使用arc()：分享一个最好用的UI
利用html5标签画圆
z . s . j
06-14 3231
您的浏览器不支持canvas标签   //开始画图,通过javascript画出来   //1得到画布：   var canvas = document.getElementById('myCanvas');   //得到画笔，获得二维的画布   var ctx = canvas.getContext('2d');   //开始画圆   ctx.beginPath();
HTML画圆，三角形，六边形
L_ZR_1的博客
10-30 4652
画圆：首先建个div，然后把div的宽高设置同样大小，最后把div的边框弧度设为50%；.circleOne{ width: 300px; height: 300px; border-radius: 50%; border: 5px solid blue; } 画三角形：首先建个div，然后把div宽高设为0，再给边框设置大小（根据自己的需
html 画圆
weixin_30522095的博客
11-09 1585
<html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <script> ...
html5 glow circle
coolest blog
12-05 206
鼠标悬浮时放大 [code="html"] your browser does not support the canvas tag var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); var scale = 1.0; var FPS = 60...
html5
welcome to 一点点 home
05-27 411
值换行规则IE5+chromenormla 使用浏览器默认的规则支持支持keep-all只能再半角空格或连字符处理换行支持不支持break-all允许再单词内换行支持支持单词换行：div{word-break:keep-all;}&lt;ol start="1" type="A" type="1" reversed="reversed"&gt;当我们再绘制图形的时候，首先要设定好绘制的样式，然后我...
html画圆圈原理,Html - 圆圈border
weixin_39636850的博客
05-30 346
SharePoint 2013 中的 PowerPoint Automation Services简介 许多大型和小型企业都将其 Microsoft SharePoint Server 库用作 Microsoft PowerPoint 演示文稿的存储库.所有这些企业在 ...诠释Linux中『一切都是文件』概念和相应的文件类型导读 在 Unix 和它衍生的比如 Lin...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值