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

效果图如下

代码如下

<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. C语言typeof详解

    前言:     typeof关键字是C语言中的一个新扩展,这个特性在linux内核中应用非常广泛. 一,说明     typeof的参数可以是两种形式:表达式或类型. 1,表达式的的例子:       ...

  2. BCB 按钮添加背景图

    使用控件:TBitBtn 位于 Additional分类 属性:GlyPh

  3. mysql服务器上的mysql这个实例中表的介绍

    1.user表. 分个分隔符

  4. DOM EVENT

    属性 此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事件句柄. ondblcl ...

  5. C++ 简明教程

    C++是一种系统编程语言.用它的发明者, Bjarne Stroustrup的话来说,C++的设计目标是: 成为“更好的C语言” 支持数据的抽象与封装 支持面向对象编程 支持泛型编程 C++提供了对硬 ...

  6. Linux基础命令---ar

    ar ar指令可以创建.修改库,也可以从库中提取单个模块.库是一个单独的文件,里面包含了按照特定结构组织起来的其他文件,我们称作member.归档文件通常是一个二进制文件,我们一般将归档文件当作库来使 ...

  7. 2016NOI冬令营day2

    早上起来发现头不痛了(还是咳) : | 上午先讲自然语言处理!完全不考!完全不涉及!一开始挺有兴趣,后面就完全听不懂了 : | 后来又讲了几道IOI题目(自称只是op),然后就是  从信息熵到数据压缩 ...

  8. Linux中Postfix邮件原理介绍（一）

    邮件相关协议 SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议, 工作在TCP的25端口.它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式 ...

  9. codevs 1423 骑士 - Tarjan - 动态规划

    题目描述 Description Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬. 最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵 ...

  10. 剑指Offer——跳台阶

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 思路分析 这个问题可以先从简单开始考虑,台阶只有1阶,只有1种跳法,台阶有2阶,有2种跳法:一种两 ...