编程 HTML / CSS

使用JS+CSS3技术：让你的名字动起来

Posted in HTML / CSS onApril 27, 2013

使用技术：JS+CSS3

浏览器支持：IE9，FireFox，Chrome

效果图：

源码分享：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD>
 <BODY> <canvas id="c" width="1024" height="768"></canvas> </BODY> <script> var inputName="JB51";//输入你的名字 var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c.getContext('2d'); document.body.clientWidth; c.width = 1024; c.height = 768;
 a.font = "bold 200pt Arial"; a.fillStyle = "rgb(255,255,255)"; a.fillText(inputName, 50, 300); var px = [];
 var imgData=a.getImageData(0,0,c.width,c.height); for(x=0; x<imgData.width; x++) { for(y=0 ; y<imgData.height; y++) { if(getPixel(imgData,x,y)[3] > 0) { px.push( [x,y] ); } } }
 setInterval(draw, 10); var max = 40; var tt = new Array(); function tendril() { this.init = function(x, y, width) { this.x = x; this.y = y; this.width = width; this.angle = Math.random()*2*Math.PI - Math.PI; this.v = 0; this.length = 0; }; this.grow = function(distance, curl, step) //distance=3.0, curl=1.0, step=0.02 { if(this.length < max) { this.x += Math.cos(this.angle) * distance; this.y += Math.sin(this.angle) * distance; this.v += Math.random() * step - step/2; this.v *= 0.9 + curl*0.1; this.angle += this.v; if(this._x != undefined) { aa = this.length/max; r = 8; g = parseInt(aa * 255); b = 32; a.beginPath(); a.strokeStyle="rgba("+r+","+g+","+b+","+(1-aa)+")"; a.moveTo(this._x,this._y); a.lineTo(this.x,this.y); a.closePath(); a.stroke(); } this._x = this.x; this._y = this.y; this.length++;
 } }; }; function draw() { // add new tendrils for(p in px) { if(Math.random() > 0.9999) { var t = new tendril(); t.init(px[p][0],px[p][1],15); tt.push ( t ); } }
 // grow actuals tendrils if(tt.length > 0) { for(t in tt) { tt[t].grow(1.0, 1.0, 0.02); } }
 } 
 function getPixel(imgData, x, y) { var offset = (x + y * imgData.width) * 4; var r = imgData.data[offset+0]; var g = imgData.data[offset+1]; var b = imgData.data[offset+2]; var a = imgData.data[offset+3]; return [r,g,b,a]; } </script></HTML>

提示：您可以先修改部分代码再运行

使用JS+CSS3技术：让你的名字动起来

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

Web前端绘制0.5像素的几种方法

Aug 11 HTML / CSS

介绍CSS3使用技巧5个

Apr 02 HTML / CSS

css3让div随鼠标移动而抖动起来

Feb 10 HTML / CSS

简单介绍CSS3中Media Query的使用

Jul 07 HTML / CSS

CSS3毛玻璃效果(blur)有白边问题的解决方法

Nov 15 HTML / CSS

css3 transform导致子元素固定定位变成绝对定位的方法

Mar 06 HTML / CSS

html5仿支付宝密码框的实现代码

Sep 06 HTML / CSS

html5 Canvas画图教程(1)—画图的基本常识

Jan 09 HTML / CSS

html5 利用canvas实现超级玛丽简单动画

Sep 06 HTML / CSS

使用html5 canvas创建太空游戏的示例

May 08 HTML / CSS

萌新的HTML5 入门指南

Nov 06 HTML / CSS

css3手动实现pc端横向滚动

Jun 21 HTML / CSS

CSS3 绘制BMW logo实的现代码

Apr 25 #HTML / CSS

纯HTML+CSS3制作导航菜单(附源码)

Apr 24 #HTML / CSS

Css3+Js制作漂亮时钟(附源码)

Apr 24 #HTML / CSS

CSS3盒子模型详解

Apr 24 #HTML / CSS

CSS3盒子模型详解

Apr 24 #HTML / CSS

css3闪亮进度条效果实现思路及代码

Apr 17 #HTML / CSS

关于CSS Tooltips(鼠标经过时显示)的效果

Apr 10 #HTML / CSS

You might like

增加反向链接的101个方法站长推荐

2007/01/31 PHP

PHP实现MVC开发得最简单的方法――模型

2007/04/10 PHP

php表单敏感字符过滤类

2014/12/08 PHP

PHP可变函数学习小结

2015/11/29 PHP

php+mysql+jquery实现简易的检索自动补全提示功能

2017/04/15 PHP

精解window.setTimeout()&window.setInterval()使用方式与参数传递问题！

2007/11/23 Javascript

兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现

2009/07/14 Javascript

jquery isType() 类型判断代码

2011/02/14 Javascript

html页面显示年月日时分秒和星期几的两种方式

2013/08/20 Javascript

javascript异步编程代码书写规范Promise学习笔记

2015/02/11 Javascript

JavaScript使用indexOf获得子字符串在字符串中位置的方法

2015/04/06 Javascript

分享JavaScript与Java中MD5使用两个例子

2015/12/23 Javascript

解决JS无法调用Controller问题的方法

2015/12/31 Javascript

js获取元素的外链样式的简单实现方法

2016/06/06 Javascript

JS实现的简单表单验证功能完整实例

2017/10/14 Javascript

react native 文字轮播的实现示例

2018/07/27 Javascript

jquery.pager.js分页实现详解

2019/07/29 jQuery

Angular8 Http拦截器简单使用教程

2019/08/20 Javascript

Vue请求java服务端并返回数据代码实例

2019/11/28 Javascript

[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局

2016/02/27 DOTA

Python框架Flask的基本数据库操作方法分析

2018/07/13 Python

python2和python3的输入和输出区别介绍

2018/11/20 Python

python获取当前文件路径以及父文件路径的方法

2019/07/10 Python

python bluetooth蓝牙信息获取蓝牙设备类型的方法

2019/11/29 Python

Python直接赋值及深浅拷贝原理详解

2020/09/05 Python

Cotton On南非：澳洲时尚平价品牌

2018/06/28 全球购物

生产车间班组长岗位职责

2014/01/06 职场文书

网络技术专业推荐信

2014/02/20 职场文书

媒矿安全生产承诺书

2014/05/23 职场文书

企业职业病防治方案

2014/05/29 职场文书

项目建议书

2015/02/04 职场文书

2015年惩防体系建设工作总结

2015/05/22 职场文书

上甘岭观后感

2015/06/10 职场文书

2016年机关单位节能宣传周活动总结

2016/04/05 职场文书

MySQL时间设置注意事项的深入总结

2021/05/06 MySQL

使用Cargo工具高效创建Rust项目

2022/08/14 Javascript