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

效果图如下

代码如下

<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. 浅谈Android View滑动冲突

    引言 上一篇文章我们从源码的角度介绍了View事件分发机制,这一篇文章我们就通过介绍滑动冲突的规则和一个实例来更加深入的学习View的事件分发机制. 1.外部滑动方向和内部滑动方向不一致 考虑这样一种 ...

  2. 远程桌面时出现身份验证错误，要求的函数不正确，这可能是由于CredSSP加密Oracle修正

    问题如下: 那么解决办法如下:

  3. C++中的访问权限

    C++中类的成员的权限: private:只能由该类的成员函数,友元函数访问,不能被该类的对象访问. protected:除了private外还能被子类的函数访问,同样不能被该类的对象访问. publ ...

  4. JavaScript: apply 方法 详解(转)——非常好

    转载自  http://www.cnblogs.com/KeenLeung/archive/2012/11/19/2778229.html 我在一开始看到javascript的函数apply和call ...

  5. RocketMQ 集群搭建--双Master方案

    安装环境 jdk1.7 alibaba-rocketmq-3.2.6.tar.gz VM虚拟机redhat6.5-x64:192.168.1.201  192.168.1.202 Xshell4 部署 ...

  6. Python入门之Python的单例模式和元类

    一.单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在. 当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上 ...

  7. 20145330 《网络攻防》 MSF基础应用

    20145330 <网络攻防> MSF基础应用 1.实验后回答问题 (1)用自己的话解释什么是exploit,payload,encode. exploit:进行渗透攻击的模块合集 pay ...

  8. Zigbee学习

    (一)Zigbee简介和开发环境快速建立(IAR) 1.我不是很清楚控制链条,对于Zigbee不是太清楚 答案:CC2530 芯片上集成了 8051 内核(增强型) 2.性能特点:低速率远距离,这造就 ...

  9. vim的个性化配置- 再谈vim的折叠和展开 -- 彻底掌握vim 的展开和折叠!

    http://www.wklken.me/posts/2016/02/03/some-vim-configs.html 一般把 设置成 逗号, 是比较好的, 因为逗号比默认的leader  要方便键入 ...

  10. POJ 3533 Light Switching Game（三维Nim积）题解

    思路:三维Nim积 代码: #include<set> #include<map> #include<stack> #include<cmath> #i ...