canvas - 酷炫粒子文字效果代码解析

最新推荐文章于 2023-04-05 21:23:19 发布
最新推荐文章于 2023-04-05 21:23:19 发布
阅读量980 收藏 1
点赞数
分类专栏： canvas-read 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vet_then_what/article/details/125562747
版权
本文详细解析了一个使用HTML5 Canvas实现的酷炫粒子文字效果的代码，从声明全局变量、图片加载到重绘画布的每个步骤，深入探讨了canvas像素操作和Particle构造函数的工作原理，帮助读者理解如何利用canvas API创建动态视觉效果。
摘要由CSDN通过智能技术生成

先看效果：

image

再放源代码：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>粒子文字</title>
    <style>
      html,
      body {
        height: 100%;
      }

      body {
        background: black;
        overflow: hidden;
      }

      canvas {
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <canvas id="c"></canvas>
  </body>
  <script>
    /* 兼容什么的 */
    window.requestAnimationFrame =
      window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame;

    var canvas = document.getElementById('c'),
      ctx = canvas.getContext('2d'),
      w = (canvas.width = window.innerWidth),
      h = (canvas.height = window.innerHeight),
      logoParticles = [],
      particleIndex = 0,
      logo = new Image(),
      hue = 0;

    function Particle(x, y) {
      this.origX = this.x = x;
      this.origY = this.y = y;
      this.color = 'white';
      this.maxLife = this.random(20);
      this.life = 0;
      this.vx = this.random(-1, 1);
      this.vy = this.random(-1, 1);
      this.grav = 0.04;
      this.index = particleIndex;
      logoParticles[particleIndex] = this;
      particleIndex++;
    }

    Particle.prototype = {
      constructor: Particle,

      draw: function () {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, 2, 2);
        this.update();
      },

      update: function () {
        if (this.life >= this.maxLife) {
          logoParticles[this.index].reset();
        }
        this.x += this.vx;
        this.y += this.vy;
        this.vy += this.grav;
        this.life++;
      },

      reset: function () {
        this.x = this.origX;
        this.y = this.origY;
        this.life = 0;
        this.color = 'hsl(' + hue + ', 100%, 50%)';
        this.vx = this.random(-1, 1);
        this.vy = this.random(-1, 1);
      },

      random: function () {
        var min = arguments.length == 1 ? 0 : arguments[0],
          max = arguments.length == 1 ? arguments[0] : arguments[1];
        return Math.random() * (max - min) + min;
      },
    };

    logo.src =
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtMAAACJCAMAAADZoES7AAAC91BMVEUAAAAAAAB/f3+qqqq/v7/MzMzU1NTb29vf39/j4+Pl5eXo6Ojq6urr6+vt7e3u7u7v7+/w8PDx8fHy8vLy8vLz8/Pz8/P09PT09PT19fX19fX19fX29vb29vb29vb39/f39/f39/f39/f4+Pj4+Pj4+Pj4+Pj4+Pj5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v8/Pz7+/v7+/v7+/v7+/v8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz9/f38/Pz8/Pz8/Pz9/f38/Pz8/Pz8/Pz8/Pz8/Pz8/Pz9/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f3
最低0.47元/天 解锁文章
VtoC
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas 3D球形文字云动画特效
qq_36190858的博客
08-23 2859
Canvas 3D球形文字云动画特效  Canvas 3D球形文字云动画特效  效果图：    代码如下，复制即可使用：   （适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。） &lt;!doctype html&gt; &lt;html&gt; &lt;head&g...
HTML5-Canvas粒子文字特效.zip
07-11
代码片段： var renderer = new THREE.WebGLRenderer({  canvas: document.querySelector("canvas"),  antialias: true });
canvas特效代码详解（1）
diemengxia1380的博客
10-24 209
canvas是一个就基于像素的画图h5元素。 具体的知识点详见：http://www.cnblogs.com/flyingLcode/p/7719026.html 下面以一些基础的代码加深对canvas的理解 绘制路径以及添加文本 （这里以时钟为例） 1 <!DOCTYPE html> 2 <html> 3 <head>...
html炫彩粒子的代码,HTML5 Canvas炫彩粒子特效生成器
weixin_33121345的博客
06-07 1010
JavaScript语言：JaveScriptBabelCoffeeScript确定const tau = 2 * Math.PIconst { random } = _const { abs, max, sin, cos } = Math// a collection of Vector methodsclass Vector {constructor (x = 0, y = 0) {this....
canvas特效代码详解（3）
diemengxia1380的博客
10-25 149
canvas是一个就基于像素的画图h5元素。 利用canvas方法绘制渐变图像 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 ...
canvas特效代码详解（2）
diemengxia1380的博客
10-25 121
canvas是一个就基于像素的画图h5元素。 利用canvas做一个如下描述所示的动态图形：当鼠标点下去时开始绘图，在鼠标结束时完成一个矩形，当再一次点击时重复第一次的绘图步骤。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"...
html5 canvas全屏酷炫抽象粒子背景动画特效
06-11
这个"html5 canvas全屏酷炫抽象粒子背景动画特效"是一个利用Canvas技术实现的创新视觉效果，它可以为网页增添生动且引人入胜的背景元素。 首先，Canvas的基本使用包括创建元素、获取绘图上下文以及进行各种绘图操作...
html5 canvas酷炫的粒子组合文字动画特效
11-23
在这个场景中，我们将深入探讨如何使用HTML5 Canvas实现酷炫的粒子组合文字动画特效。 首先，我们需要在HTML页面中添加一个`<canvas>`标签，并通过JavaScript获取其上下文。通常我们使用`2d`渲染上下文，因为它提供...
canvas文字粒子特效特效代码
03-20
"canvas文字粒子特效特效代码"是基于Canvas的一个应用实例，它将文字转化为粒子效果，为网页添加视觉吸引力。这样的特效常用于网页标题、背景或者动态展示文字信息，给用户带来更丰富的交互体验。 在Canvas上实现...
html5 canvas酷炫彩色粒子爆炸动画特效.zip
08-07
"html5 canvas酷炫彩色粒子爆炸动画特效"是利用Canvas API创建的一种视觉效果，它通过编程方式生成并操控大量彩色粒子，形成一种动态的、引人注目的爆炸动画。这个压缩包中包含的源码，很可能是用于展示如何实现这种...
基于html5 canvas实现的动态文字特效代码
11-23
基于html5 canvas实现的动态文字特效代码
HTML5炫彩粒子动画背景特效特效代码
03-20
HTML5炫彩粒子动画背景特效是一款基于HTML5 Canvas绘制的随机流动粒子动画背景特效。
HTML5 Canvas粒子文字特效
10-17
HTML5 Canvas粒子文字特效，增加页面效果，打造酷炫首页！
HTML5 Canvas一碗面条特效特效代码
03-20
HTML5 Canvas一碗面条特效是一款基于canvas绘制一碗拉面粗面条的透明元素动画特效。
html5 canvas动态的粒子文字特效
09-14
html5 canvas动态的粒子文字特效
canvas特效用例之粒子射线
极简
08-31 1783
一、构建粒子类 Particle.staticOption = { color:'#000',//粒子填充颜色 radius:10,//粒子半径 x:0,//粒子x坐标，即粒子中心x坐标 y:0,//粒子y坐标，即粒子中心y坐标 speedX:1,//粒子x方向上速度 speedY:1//粒子y方向上速度 }; function Partic...
canvas实现的炫酷文字特效html页面源码
mazai5080的博客
05-07 777
本源码编码：10155，需要的朋友，关注文末公众号后，搜索10155，即可获取。
使用canvas和javaScript实现一个超炫酷的场景（附上代码）
lyk_xz的博客
04-05 332
【代码】使用canvas和javaScript实现一个超炫酷的场景（附上代码）
Canvas绘制炫酷的火焰风暴动画
越陌度阡
08-28 1002
今天给大家分享一个用Canvas写的火焰风暴动画，实现效果如下： 怎么样，场面是不是很壮观，下面是代码实现，欢迎大家复制粘贴和吐槽。 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" con.........
html5 canvas全屏酷炫星光闪烁3D视差背景动画特效html代码
最新发布
06-03
以下是一个基于 HTML5 Canvas 的全屏酷炫星光闪烁 3D 视差背景动画特效的 HTML 代码： ```html <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Canvas Star Field</title> <style> canvas { background-color: #000; } </style> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), stars = [], particles = [], maxStars = 1300, maxParticles = 100; // 创建星星 for (var i = 0; i < maxStars; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random() * 1.5, depth: Math.random() * 2000 + 500 }); } // 创建粒子 function emitParticle() { if (particles.length < maxParticles) { var particle = { x: canvas.width / 2, y: canvas.height / 2, vx: Math.random() * 2 - 1, vy: Math.random() * 2 - 1, radius: Math.random() * 2 + 2, alpha: Math.random() * 0.5 + 0.5, life: Math.random() * 200 + 100 }; particles.push(particle); } } // 更新粒子 function updateParticles() { particles.forEach(function(particle, index) { particle.x += particle.vx; particle.y += particle.vy; particle.life--; particle.alpha -= 0.01; if (particle.life <= 0 || particle.alpha <= 0) { particles.splice(index, 1); } }); } // 绘制星星 function drawStar(star) { var x = (star.x - canvas.width / 2) * (star.depth / canvas.width), y = (star.y - canvas.height / 2) * (star.depth / canvas.width), radius = star.radius * (star.depth / canvas.width); context.beginPath(); context.arc(x + canvas.width / 2, y + canvas.height / 2, radius, 0, Math.PI * 2); context.fillStyle = '#fff'; context.fill(); } // 绘制粒子 function drawParticle(particle) { context.beginPath(); context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2); context.fillStyle = 'rgba(255, 255, 255, ' + particle.alpha + ')'; context.fill(); } // 绘制 function draw() { context.clearRect(0, 0, canvas.width, canvas.height); // 绘制星星 stars.forEach(function(star) { drawStar(star); }); // 绘制粒子 particles.forEach(function(particle) { drawParticle(particle); }); } // 循环 function loop() { emitParticle(); updateParticles(); draw(); requestAnimationFrame(loop); } // 初始化画布 function initCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); } // 初始化 function init() { initCanvas(); loop(); } // 执行初始化 init(); </script> </body> </html> ``` 这段代码创建了一个全屏的 Canvas 画布，并在其中绘制了星星和粒子。通过调整粒子的数量和大小，以及星星的深度和大小，可以得到不同的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值