编程 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 相关文章推荐

深入浅出CSS3 background-clip,background-origin和border-image教程

Jan 27 HTML / CSS

魔幻般冒泡背景的CSS3按钮动画

Feb 27 HTML / CSS

CSS3制作彩色进度条样式的代码示例分享

Jun 23 HTML / CSS

HTML5边玩边学（1）画布实现方法

Sep 21 HTML / CSS

html5的新增的标签和废除的标签简要概述

Feb 20 HTML / CSS

x-ua-compatible content=”IE=7, IE=9″意思理解

Jul 22 HTML / CSS

HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形

Jun 23 HTML / CSS

使用phonegap进行本地存储的实现方法

Mar 31 HTML / CSS

canvas像素点操作之视频绿幕抠图

Sep 11 HTML / CSS

CSS预处理框架——Stylus

Apr 21 HTML / CSS

详解CSS中的特指度和层叠问题

Jul 15 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

php读取文件内容至字符串中，同时去除换行、空行、行首行尾空格（Zjmainstay原创）

2012/07/31 PHP

php读取mysql的简单实例

2014/01/15 PHP

php简单实现短网址(短链)还原的方法(测试可用)

2016/05/09 PHP

PHP使用finfo_file()函数检测上传图片类型的实现方法

2017/04/18 PHP

JavaScript 撑出页面文字换行

2009/06/15 Javascript

使用SyntaxHighlighter实现HTML高亮显示代码的方法

2010/02/04 Javascript

jquery validation插件表单验证的一个例子

2010/03/03 Javascript

js保留小数点后几位的写法

2014/01/03 Javascript

jquery操作下拉列表、文本框、复选框、单选框集合(收藏)

2014/01/08 Javascript

javascript基于DOM实现权限选择实例分析

2015/05/14 Javascript

在JSP中如何实现MD5加密的方法

2016/11/02 Javascript

jQuery实现可拖动进度条实例代码

2017/06/21 jQuery

javascript使用正则实现去掉字符串前面的所有0

2018/07/23 Javascript

vue 强制组件重新渲染(重置)的两种方案

2019/10/29 Javascript

vue随机验证码组件的封装实现

2020/02/19 Javascript

小程序实现可拖动的悬浮按钮

2020/09/07 Javascript

Python对文件操作知识汇总

2016/05/15 Python

Python查看微信撤回消息代码

2018/06/07 Python

python装饰器常见使用方法分析

2019/06/26 Python

Python matplotlib绘制饼状图功能示例

2019/09/10 Python

Python turtle库绘制菱形的3种方式小结

2019/11/23 Python

Python爬虫HTPP请求方法有哪些

2020/06/03 Python

基于python判断字符串括号是否闭合{}[]()

2020/09/21 Python

python海龟绘图之画国旗实例代码

2020/11/11 Python

Python约瑟夫生者死者小游戏实例讲解

2021/01/04 Python

python使用numpy中的size()函数实例用法详解

2021/01/29 Python

意大利宠物用品购物网站：Bauzaar

2018/09/15 全球购物

服装机修工岗位职责

2013/12/26 职场文书

四好少年事迹材料

2014/01/12 职场文书

银行办理业务介绍信

2014/01/18 职场文书

工作过失检讨书

2014/02/23 职场文书

安全责任协议书

2014/04/21 职场文书

工作失职检讨书500字

2014/10/17 职场文书

少年犯观后感

2015/06/11 职场文书

《狼牙山五壮士》教学反思

2016/02/17 职场文书

使用SQL实现车流量的计算的示例代码

2022/02/28 SQL Server