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

效果图如下

代码如下

<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. 禁止F12与右键

    实践项目的代码哦,给大家分享下,如何屏蔽右键与F12. 应用网站  www.empiretreasure.vip   与       www.MineBook.vip.可以去逛逛哦. 不多说了,上代码 ...

  2. 利用js添加class

    来来来,开篇点题. 分页应用.当在当前页时,分页的数字有个框之类的. 重要代码如下 <ul class="pagination"> <li><a hr ...

  3. zw版【转发·台湾nvp系列Delphi例程】HALCON LocalMin2

    zw版[转发·台湾nvp系列Delphi例程]HALCON LocalMin2 procedure TForm1.Button1Click(Sender: TObject);var img : HUn ...

  4. EditPlus 5.1.2066 中文版（1月30日修正）

    之前有一些网友反馈汉化版的 EditPlus 中翻页键无法正常工作.经过调查,发现是翻译工具的问题. 因此,我用新的工具重新翻译了 EditPlus.翻页键在新中文版中应该可以正常工作了. 有需要的网 ...

  5. 聊聊WKWebView

    聊一聊WKWebView 前言 由于之前一直在用UIWebView,所以对于WKWebView只是停留在知道,了解的状态,并未深入的去研究.前天一个项目要求支持iOS8以上,要加入一个web界面.在习 ...

  6. Python中的is和==的区别，==判断值是否相等，is判断地址是否一致

    Python中的is和==的区别 Python中的对象包含三要素:id.type.value. 其中id用来唯一标示一个对象,type标识对象的类型,value是对象的值. is判断的是a对象是否就是 ...

  7. Linux基础命令---mknod

    mknod 创建块设备或者字符设备文件.此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora.   1.语法       mknod [选项] ...

  8. 关于QStandardItemModel

    类QabstractItemModel,QabstractListModel,QAbstractTableModel不保存数据,用户需要从这些类派生出子类,并在子类中定义某种数据结构来保存数据.与此不 ...

  9. IDEA上传代码到码云

  10. 解决input标签placeholder属性浏览器兼容性问题的一种方法

    为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...