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

效果图如下

代码如下

<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. The Air Jordan 11 Gym Red will be available December 9

    A few years ago Carmelo Anthony set the internet on fire when he was spotted rocking a never before ...

  2. 浅谈Android View事件分发机制

    引言 前面的文章介绍了View的基础知识和View的滑动,今天我们来介绍View的另一个核心知识,View的事件分发机制. 点击事件的传递规则 所谓的点击事件的分发机制,其实就是对MotionEven ...

  3. 面经：Bloomberg Internship第一轮

    上来先问了一个系统设计的问题,一个front end, 一个back end. front end有很多UI,一个UI对10个多customers,back end有许多processor,或者pro ...

  4. Nhibernate入门与demo

    学习和使用Nhibernate已经很久了,一直想写点东西和大家一起学习使用Nhibernate.博客园里也有很多大牛写了很多关于Nhibernate入门的文章.其中:李永京的博客http://www. ...

  5. sql中 substring和charindex 的用法

    -- 第一个参数是要截取的字符串,第二个参数是从第几个字符开始截取,第三个参数是截取的长度 --例如:select SUBSTRING('12345678',1,4) 返回 1234 -- selec ...

  6. amaze ui实现下拉列表

    对amaze ui ,只能说很好,很适合开发者使用,然后省略一万字. 今天记录下下拉列表的实现. 关于调用,这里不赘述了, 直接记录代码: <ul class="am-dropdown ...

  7. LINUX环境变量（二）

    一.Shell变量分为本地变量和环境变量. 1.本地变量:在用户现有运行的脚本中使用 a) 定义本地变量 格式: variable-name=value b) 显示本地变量 格式: set  c) 清 ...

  8. zookeeper与卡夫卡集群搭建

    首先这片博客没有任何理论性的东西,只是详细说明kafka与zookeeper集群的搭建过程,需要三台linux服务器. java环境变量设置 zookeeper集群搭建 kafka集群搭建 java环 ...

  9. 高并发下，php使用uniqid函数生成唯一标识符的四种方案

    PHP uniqid()函数可用于生成不重复的唯一标识符,该函数基于微秒级当前时间戳.在高并发或者间隔时长极短(如循环代码)的情况下,会出现大量重复数据.即使使用了第二个参数,也会重复,最好的方案是结 ...

  10. android CMakeLists

    https://developer.android.google.cn/studio/projects/configure-cmake https://blog.csdn.net/songmingzh ...