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

前端技术 2023/09/08 CSS

使用技术：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>

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

本文地址：https://www.stayed.cn/item/21468

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)