canvas+js实现荧光字符效果
一个小玩意，代码来源于网络。
效果图如下
代码如下
<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实现荧光字符效果的更多相关文章
- 用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...
- html5 canvas+js实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
- html5 canvas+js实现ps钢笔抠图（速抠图 www.sukoutu.com）
html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com) 根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...
- 使用JavaScript和Canvas打造真实的雨滴效果
使用JavaScript和Canvas打造真实的雨滴效果 寸志 · 1 年前 我最近搞了一个有趣的项目——rainyday.js .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗 ...
- vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 经典！HTML5 Canvas 模拟可撕裂布料效果
这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...
随机推荐
- 删除排序数组中的重复数字 II
题目连接 http://www.lintcode.com/zh-cn/problem/remove-duplicates-from-sorted-array-ii/ 题目大意 跟进“删除重复数字”: ...
- SQL语句常见优化方法
Sql优化方法 先进行选择运算(where limit)再进行连接运算 where子句中应把过滤性最强的条件放在最前面 where子句中字段的顺序应和组合索引中字段顺序一致 使用索引 使用覆盖索引来避 ...
- Linux下Tomcat同时部署两个工程然而只有一个能访问问题
Linux下Tomcat同时部署两个工程然而只有一个能访问问题 问题: Linux下单个部署到Tomcat下的时候都正常,两个一起部署,只有一个能访问: 解决方案: 由于采用#./shutdown.s ...
- java安全体系之JCA、JCE、JAAS、JSSE及其关系
首先.如果是运行在internet上的系统,并且如果是个涉及到利益性的系统,不可避免的会遭受各种攻击(我们公司的很多系统从OS到DB到webapp就实时有收到攻击和破解),所以尽可能保证安全性将不再是 ...
- 20145331魏澍琛《网络对抗》Exp6 信息搜集与漏洞扫描
20145331魏澍琛<网络对抗>Exp6 信息搜集与漏洞扫描 问题回答 1.哪些组织负责DNS,IP的管理? DNS域名服务器:绝大多数在欧洲和北美洲,中国仅拥有镜像服务器. 全球一共有 ...
- 分析linux内核中的slub内存管理算法
1. 分析的linux内核源码版本为4.18.0 2. 与slub相关的内核配置项为CONFIG_SLUB 3. 一切都从一个结构体数组kmalloc_caches开始,它的原型如下: ] __ro_ ...
- bootstrap的carousel图片轮播
整个轮播是放在一个div .carousel和.slide的div中的, 包括3个部分: 1. 第一个部分indicator位于下方的指示器部分. 结构是一个ol和li, ol的类是carousel- ...
- Codeforces Round #530 (Div. 1)
A - Sum in the tree 就是贪心选尽量让上面的点权尽量大,那么对于偶数层的点,其到根节点的和即为所有儿子中的最大值. #include<bits/stdc++.h> usi ...
- BZOJ3297: [USACO2011 Open]forgot DP+字符串
Description 发生了这么多,贝茜已经忘记了她cowtube密码.然而,她记得一些有用的信息.首先,她记得她的密码(记为变 量P)长度为L(1 <= L<=1,000)字符串,并可 ...
- NS3 fifth.cc 拥塞窗口实例
fifth.cc /* -*- Mode:C++; c-file-style:"gnu"; indent-tabs-mode:nil; -*- */ /* * This progr ...