一个小玩意，代码来源于网络。

效果图如下

代码如下

<html>

<head>

<style>

* {

		margin: 0;

		padding: 0;

	}

	html,

	body {

		height: 100%;

		position: relative;

		width: 100%;

	}

	body {

		background: #eee;

	}

	canvas {

		background: white;

		display: block;

	}

	#c {

		left: 50%;

		position: absolute;

		top: 50%;

		transform: translate(-50%, -50%);

	}

</style>

<script>

;(function(main) {

		var args = {};

		window.onload = function() {

			main(args);

		};

	})(function(args) {

		'use strict';

		var Box = function(x, y, w, h, s) {

			this.x = x;

			this.y = y;

			this.w = w;

			this.h = h;

			this.s = s;

			this.a = Math.random() * Math.PI * 2;

			this.hue = Math.random() * 360;

		};

		Box.prototype = {

			constructor: Box,

			update: function() {

				this.a += Math.random() * 0.5 - 0.25;

				this.x += Math.cos(this.a) * this.s;

				this.y += Math.sin(this.a) * this.s;

				this.hue += 5;

				if(this.x > WIDTH) this.x = 0;

				else if(this.x < 0) this.x = WIDTH;

				if(this.y > HEIGHT) this.y = 0;

				else if(this.y < 0) this.y = HEIGHT;

			},

			render: function(ctx) {

				ctx.save();

				ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 50%, 1)';

				ctx.translate(this.x, this.y);

				ctx.rotate(this.a);

				ctx.fillRect(-this.w, -this.h / 2, this.w, this.h);

				ctx.restore();

			}

		};

		var Circle = function(x, y, tx, ty, r) {

			this.x = x;

			this.y = y;

			this.ox = x;

			this.oy = y;

			this.tx = tx;

			this.ty = ty;

			this.lx = x;

			this.ly = y;

			this.r = r;

			this.br = r;

			this.a = Math.random() * Math.PI * 2;

			this.sx = Math.random() * 0.5;

			this.sy = Math.random() * 0.5;

			this.o = Math.random() * 1;

			this.delay = Math.random() * 200;

			this.delayCtr = 0;

			this.hue = Math.random() * 360;

		};

		Circle.prototype = {

			constructor: Circle,

			update: function() {

				if(this.delayCtr < this.delay) {

					this.delayCtr++;

					return;

				}

				this.hue += 1;

				this.a += 0.1;

				this.lx = this.x;

				this.ly = this.y;

				if(!clickToggle) {

					this.x += (this.tx - this.x) * this.sx;

					this.y += (this.ty - this.y) * this.sy;

				} else {

					this.x += (this.ox - this.x) * this.sx;

					this.y += (this.oy - this.y) * this.sy;

				}

				this.r = this.br + Math.cos(this.a) * (this.br * 0.5);

			},

			render: function(ctx) {

				ctx.save();

				ctx.globalAlpha = this.o;

				ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 50%, 1)';

				ctx.translate(this.x, this.y);

				ctx.beginPath();

				ctx.arc(0, 0, this.r, 0, Math.PI * 2);

				ctx.fill();

				ctx.restore();

				if(clickToggle) {

					ctx.save();

					ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, 50%, 1)';

					ctx.beginPath();

					ctx.moveTo(this.lx, this.ly);

					ctx.lineTo(this.x, this.y);

					ctx.stroke();

					ctx.restore();

				}

			}

		};

		var txtCanvas = document.createElement('canvas');

		var txtCtx = txtCanvas.getContext('2d');

		var c = document.getElementById('c');

		var ctx = c.getContext('2d');

		var WIDTH = c.width = window.innerWidth;

		var HEIGHT = c.height = window.innerHeight;

		var imgData = null;

		var idx = null;

		var skip = 4;

		var circles = [];

		var circle = null;

		var a = null;

		var clickToggle = false;

		var boxList = [];

		var box = null;

		txtCanvas.width = WIDTH;

		txtCanvas.height = HEIGHT;

		txtCtx.font = 'bold 70px Sans-serif';

		txtCtx.textAlign = 'center';

		txtCtx.baseline = 'middle';

		txtCtx.fillText('I   L O V E   U', WIDTH / 2, HEIGHT / 2);

		ctx.font = 'bold 12px Monospace';

		ctx.textAlign = 'center';

		ctx.baseline = 'middle';

		imgData = txtCtx.getImageData(0, 0, WIDTH, HEIGHT).data;

		for(var y = 0; y < HEIGHT; y += skip) {

			for(var x = 0; x < WIDTH; x += skip) {

				idx = (x + y * WIDTH) * 4 - 1;

				if(imgData[idx] > 0) {

					a = Math.PI * 2 * Math.random();

					circle = new Circle(

						WIDTH / 2 + Math.cos(a) * WIDTH,

						HEIGHT / 2 + Math.sin(a) * WIDTH,

						x,

						y,

						Math.random() * 4

					);

					circles.push(circle);

				}

			}

		}

		for(var b = 0; b < 10; b++) {

			box = new Box(

					WIDTH * Math.random(),

					HEIGHT * Math.random(),

					5,

					2,

					5 + Math.random() * 5

				);

			boxList.push(box);

		}

		c.addEventListener('click', function(e) {

			clickToggle = !clickToggle;

		});

		requestAnimationFrame(function loop() {

			requestAnimationFrame(loop);

			ctx.globalCompositeOperation = 'source-over';

			ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';

			ctx.fillRect(0, 0, WIDTH, HEIGHT);

			ctx.fillStyle = 'white';

			ctx.fillText('CLICK TO TOGGLE', WIDTH / 2, HEIGHT / 2 + 100);					

			ctx.globalCompositeOperation = 'lighter';

			for(var i = 0, len = circles.length; i < len; i++) {

				circle = circles[i];

				circle.update();

				circle.render(ctx);

			}

			for(var j = 0; j < boxList.length; j++) {

				box = boxList[j];

				box.update();

				box.render(ctx);

			}

		});

	});

</script>

</head>

<body>

<canvas id="c"></canvas>

</body>

</html>

　　可直接复制代码保存为html文件，打开查看效果

canvas+js实现荧光字符效果的更多相关文章

  1. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  2. html5 canvas+js实现ps钢笔抠图

    html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...

  3. html5 canvas+js实现ps钢笔抠图（速抠图 www.sukoutu.com）

    html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com)   根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...

  4. 使用JavaScript和Canvas打造真实的雨滴效果

    使用JavaScript和Canvas打造真实的雨滴效果 寸志 · 1 年前 我最近搞了一个有趣的项目——rainyday.js .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗 ...

  5. vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  6. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  7. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  8. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 经典！HTML5 Canvas 模拟可撕裂布料效果

    这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...

随机推荐

  1. 015-awk

    1.awk的处理方式: 一次处理一行. 对每行可以进行切片处理,针对字段处理.2.awk的格式: awk BEGIN{循环之前初始化} [options] 'command' END{循环之后结尾} ...

  2. 第一篇 Python图片处理模块PIL（pillow）

    本篇包含:一.Image类的属性:1.Format   2.Mode   3.Size    4.Palette    5.Info                   二.类的函数:1.New   ...

  3. Loadrunder场景设计篇——添加windows Resource计数器和指标说明

    目的 监控要测试的windows服务器的资源使用情况 A.添加计数器步骤 1.添加视图,方法双击.拖动左侧的Windows Rescources到右边图形区,或右键右侧已有视图,Open a New ...

  4. python3.4学习笔记(二) 类型判断，异常处理，终止程序

    python3.4学习笔记(二) 类型判断,异常处理,终止程序,实例代码: #idle中按F5可以运行代码 #引入外部模块 import xxx #random模块,randint(开始数,结束数) ...

  5. Android查缺补漏（View篇）--布局文件中的“@+id”和“@id”有什么区别？

    Android布局文件中的"@+id"和"@id"有什么区别? +id表示为控件指定一个id(新增一个id),如: <cn.codingblock.vie ...

  6. Python之路----内置函数补充与匿名函数

    内置函数补充:reversed()保留原列表,返回一个反向的迭代器 l = [1,2,3,4,5] l.reverse() print(l) l = [1,2,3,4,5] l2 = reversed ...

  7. python构造栈结构

    栈:是一种先进后出的数据结构:本片文章,我们用python的面向对象来构造这样的数据结构. 栈中的每一个数据除了存储当前的数值外,还存储着当前数值下一个数据的类型(注意不是下一个数据的数值). cla ...

  8. centos 安装最新稳定版本docker

    直接yum安装的docker版本是 : docker --versionDocker version 1.12.6, build 85d7426/1.12.6 一些新特性需要安装最新的稳定版本 国内可 ...

  9. 20145332卢鑫 MSF基础应用

    20145332卢鑫 MSF基础应用 实验过程 靶机的IP地址:192.168.10.160 Kali的IP地址:192.168.10.128 1.一个主动攻击 攻击XP系统的漏洞:ms08_067 ...

  10. linux 之awk命令详解

    awk是一种程序语言,对文档资料的处理具有很强的功能.awk名称是由它三个最初设计者的姓氏的第一个字母而命名的: Alfred V. Aho.Peter J. We i n b e rg e r.Br ...