Canvas 光源发光特效

Canvas 光源发光特效实现
原创 已于 2025-06-27 15:43:27 修改 · 626 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

于 2025-04-23 15:12:38 首次发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 光源发光特效</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }
        canvas {
            display: block;
        }
        .credit {
            position: fixed;
            bottom: 10px;
            right: 10px;
            color: rgba(255, 255, 255, 0.3);
            font-family: Arial, sans-serif;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <canvas id="glowCanvas"></canvas>
 

    <script>
        // 光源发光特效插件
        class GlowEffect {
            constructor(canvasId, options = {}) {
                this.canvas = document.getElementById(canvasId);
                this.ctx = this.canvas.getContext('2d');
                this.particles = [];
                this.lightSources = [];
                this.animationId = null;
                
                // 默认配置
                this.config = {
                    particleCount: 100,
                    maxParticleSize: 3,
                    glowIntensity: 0.8,
                    lightColor: '#ffffff',
                    backgroundColor: '#000000',
                    ...options
                };
                
                this.init();
            }
            
            init() {
                this.resizeCanvas();
                window.addEventListener('resize', this.resizeCanvas.bind(this));
                
                // 创建粒子
                for (let i = 0; i < this.config.particleCount; i++) {
                    this.particles.push(this.createParticle());
                }
                
                // 添加鼠标光源
                this.canvas.addEventListener('mousemove', (e) => {
                    this.addLightSource(e.clientX, e.clientY);
                });
                
                // 添加触摸光源（移动设备）
                this.canvas.addEventListener('touchmove', (e) => {
                    e.preventDefault();
                    const touch = e.touches[0];
                    this.addLightSource(touch.clientX, touch.clientY);
                });
                
                // 自动添加随机光源
                setInterval(() => {
                    if (this.lightSources.length < 3) { // 最多3个自动光源
                        const x = Math.random() * this.canvas.width;
                        const y = Math.random() * this.canvas.height;
                        this.addLightSource(x, y, true);
                    }
                }, 3000);
                
                this.animate();
            }
            
            resizeCanvas() {
                this.canvas.width = window.innerWidth;
                this.canvas.height = window.innerHeight;
            }
            
            createParticle() {
                return {
                    x: Math.random() * this.canvas.width,
                    y: Math.random() * this.canvas.height,
                    size: Math.random() * this.config.maxParticleSize,
                    speedX: Math.random() * 0.5 - 0.25,
                    speedY: Math.random() * 0.5 - 0.25
                };
            }
            
            addLightSource(x, y, isAuto = false) {
                this.lightSources.push({
                    x,
                    y,
                    radius: 100 + Math.random() * 50,
                    intensity: 0.8 + Math.random() * 0.2,
                    isAuto,
                    life: isAuto ? 100 + Math.random() * 100 : Infinity
                });
                
                // 限制光源数量
                if (this.lightSources.length > 5) {
                    this.lightSources.shift();
                }
            }
            
            updateParticles() {
                for (let i = 0; i < this.particles.length; i++) {
                    const p = this.particles[i];
                    
                    p.x += p.speedX;
                    p.y += p.speedY;
                    
                    // 边界检查
                    if (p.x < 0 || p.x > this.canvas.width) p.speedX *= -1;
                    if (p.y < 0 || p.y > this.canvas.height) p.speedY *= -1;
                    
                    // 随机改变方向
                    if (Math.random() < 0.01) {
                        p.speedX = Math.random() * 0.5 - 0.25;
                        p.speedY = Math.random() * 0.5 - 0.25;
                    }
                }
            }
            
            updateLightSources() {
                for (let i = this.lightSources.length - 1; i >= 0; i--) {
                    const light = this.lightSources[i];
                    
                    if (light.isAuto) {
                        light.life--;
                        if (light.life <= 0) {
                            this.lightSources.splice(i, 1);
                            continue;
                        }
                        
                        // 自动光源轻微移动
                        light.x += Math.random() * 2 - 1;
                        light.y += Math.random() * 2 - 1;
                    }
                }
            }
            
            draw() {
                // 清除画布
                this.ctx.fillStyle = this.config.backgroundColor;
                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
                
                // 绘制发光效果
                for (const light of this.lightSources) {
                    const gradient = this.ctx.createRadialGradient(
                        light.x, light.y, 0,
                        light.x, light.y, light.radius
                    );
                    gradient.addColorStop(0, this.config.lightColor);
                    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
                    
                    this.ctx.globalCompositeOperation = 'lighter';
                    this.ctx.fillStyle = gradient;
                    this.ctx.beginPath();
                    this.ctx.arc(light.x, light.y, light.radius, 0, Math.PI * 2);
                    this.ctx.fill();
                }
                
                // 绘制粒子
                this.ctx.globalCompositeOperation = 'lighter';
                for (const p of this.particles) {
                    // 计算粒子亮度（基于最近的光源）
                    let brightness = 0;
                    for (const light of this.lightSources) {
                        const dx = p.x - light.x;
                        const dy = p.y - light.y;
                        const distance = Math.sqrt(dx * dx + dy * dy);
                        const lightEffect = Math.max(0, 1 - distance / light.radius) * light.intensity;
                        brightness = Math.max(brightness, lightEffect);
                    }
                    
                    if (brightness > 0) {
                        const alpha = brightness * this.config.glowIntensity;
                        this.ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
                        this.ctx.beginPath();
                        this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                        this.ctx.fill();
                    }
                }
            }
            
            animate() {
                this.updateParticles();
                this.updateLightSources();
                this.draw();
                this.animationId = requestAnimationFrame(this.animate.bind(this));
            }
            
            destroy() {
                if (this.animationId) {
                    cancelAnimationFrame(this.animationId);
                }
                // 移除事件监听器等清理工作
            }
        }
        
        // 初始化插件
        document.addEventListener('DOMContentLoaded', () => {
            const glowEffect = new GlowEffect('glowCanvas', {
                particleCount: 150,
                maxParticleSize: 4,
                glowIntensity: 0.9,
                lightColor: '#4a8cff'
            });
            

        });
    </script>
</body>
</html>

ziblog
关注
9个非常有趣的HTML5 Canvas动画特效合集
白粥
01-14 8110
HTML5技术正在不断的发展和更新，越来越多的开发者也正在加入HTML5阵营，甚至在移动开发上HTML5的地位也是越来越重要了。HTML5中的大部分动画都是通过Canvas实现，因为Canvas就像一块画布，我们可以通过调用脚本在Canvas上绘制任意形状，甚至是制作动画。本文就是收集了很多非常富有创意的一些canvas动画特效例子，这些例子都非常适合大家学习。这篇文章绝对颠覆你对HTML特效的认知。
canvas特效
01-11
基于H5 canvas 实现的超炫字体特效，金光效果。需基于three.js库
canvas动画特效
L_zhazhahui的博客
11-08 321
学习canvas制作飘动旗子
canvas数字特效
qq_15980201的博客
11-07 820
canvas数字特效                 new document            (function(){        var digit=[ [//digit 0 [0,1,1,1,1,1,0], [1,1,1,1,1,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [
Canvas特效
samll_cat的博客
07-10 843
今天来分享一个炫酷的特效，正如标题所提到的，我们使用到了 canvas 元素，可以理解为是一张画布，有了画布之后，我们就要在画布上进行绘制，而 canvas 元素本身是不具备绘图能力的，所以我们要借助 JavaScript 来完成绘制工作。 HTML 的结构我们只需要一个 标签就够了 &lt;canvas id="canvas"&gt; 测试兼容性 &lt;/canvas&gt; ...
canvas光源发光特效插件.rar
10-01
"canvas光源发光特效插件.rar" 提供了一个利用HTML5 Canvas技术和JavaScript实现的特效代码，它具有高度的实用性，能够完美运行，并且允许进行二次修改以适应不同的项目需求。这个插件主要涉及到以下知识点： 1. **...
精选资源
Canvas发光夜景动画场景特效
06-24
在这个“Canvas发光夜景动画场景特效”中，我们主要探讨如何利用Canvas来构建一个动态、绚丽的夜景动画效果。 首先，Canvas API 提供了一系列的绘图方法，如 `fillRect()` 用于填充矩形，`beginPath()` 和 `stroke...
Canvas金色发光旋涡动画特效.zip
07-04
在这个"Canvas金色发光旋涡动画特效.zip"压缩包中，包含了一个使用JavaScript实现的酷炫动画，主要涉及到的技术点有Canvas API的使用、时间和动画帧管理以及颜色与光照效果的模拟。 首先，Canvas API是HTML5引入的...
Canvas粒子发光特效实现与优化
Canvas粒子发光特效是一种基于HTML5 Canvas API实现的前端视觉动画技术，广泛应用于网页设计、交互式界面、数据可视化以及数字艺术展示等领域。该特效通过JavaScript在Canvas画布上绘制大量微小的粒子，并结合颜色...
Canvas发光夜景动画场景特效.zip
07-11
"Canvas发光夜景动画场景特效"是利用Canvas技术来构建的一种视觉效果，旨在模拟夜晚城市景观的动态光影变化，为用户带来沉浸式的视觉享受。这种特效通常用于网站背景、游戏场景或者互动设计中，增加网页的吸引力和...
canvas粒子发光特效.zip
07-04
canvas粒子发光特效
HTML5 Canvas圆点发光特效
06-24
HTML5 Canvas圆点发光特效是一款基于canvas绘制绿色发光的圆点粒子动画特效
canvas特效收集
Fisher_yu01的博客
01-29 1966
彩虹隧道: http://www.jq22.com/code2185 波浪粒子 http://test.160.jingan8.cn/canvas/web/15/index.html 鼠标经过特效 http://test.160.jingan8.cn/canvas/web/21/index.html 黑洞粒子 http://test.160.jingan8.cn/canvas/web...
H5炫酷特效系列2——canvas特效-炫酷的心
小圣贤君的博客
07-29 7732
之前已经有了一个满屏幕红心的案例，这次带来一个更加炫酷的心型炫酷动效，直接上图，有兴趣的就继续往下看，没兴趣直接过。 屏幕上眼花缭乱的心，不停的冲击着你的视线，让那些少女心砰砰直跳，绝对表白利器，同志们可以直接拿去给中意的姑娘看哦。 直接将下面的代码复制运行就可以看到效果：<!DOCTYPE html> <html><head> <meta charset="utf-8"> <tit
Canvas特效页面分享
qq_25496415的博客
09-22 823
文章目录Canvas特效页面分享getContext()：lineWidth：strokeStyle：createLinearGradient()：beginPath：lineCap：arc()：Stroke:requestAnimationFrame：clearRect：cancelAnimationFrame：Rotate：globalCompositeOperation ：PS:在这个dem...
canvas雨滴特效
xuehuilizi的博客
06-18 495
雨滴 若打不开，请更换浏览器 /* cxt.fillStyle=“white”; cxt.fillRect(150,150,100,100);画实心矩形 /*cxt.strokeStyle=“white”; cxt.strokeRect(150,150,100,100);画空心矩形 } /*var y=0; setInterval(function () { ...
Canvas特效动画
分享前端工程化、动效魔法与性能之舞！
06-28 6684
给大家分享一个用Canvas绘图写成的动画特效，动画的效果如下： 以下是代码实现： <!DOCTYPE html> <html> <head> <title>Canvas特效动画</title> <style> canvas { background: #......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值