纯JavaScript实现表白代码
文章目录
在国庆节当天，大家都在表达着对祖国的热爱，当然这也是个对自己爱的人表白的一个好机会，本文旨在使用JavaScript实现表白的代码。
代码
首先是实现的具体代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>htm5浪漫表白</title></head><body><scripttype="text/javascript">BLUR=false;PULSATION=true;PULSATION_PERIOD=600;PARTICLE_RADIUS=4;/* disable blur before using blink */BLINK=false;GLOBAL_PULSATION=false;QUALITY=2;/* 0 - 5 *//* set false if you prefer rectangles */ARC=true;/* trembling + blur = fun */TREMBLING=0;/* 0 - infinity */FANCY_FONT="Arial";BACKGROUND="#000";BLENDING=true;/* if empty the text will be a random number */varTEXT;
num =0;
TEXTArray =["陌陌","深爱","某某","直到","永远"];QUALITY_TO_FONT_SIZE=[10,12,40,50,100,350];QUALITY_TO_SCALE=[20,6,4,2,0.9,0.5];QUALITY_TO_TEXT_POS=[10,20,60,100,370,280];
window.onload=function(){
document.body.style.backgroundColor =BACKGROUND;var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");varW= canvas.width;varH= canvas.height;var tcanvas = document.createElement("canvas");var tctx = tcanvas.getContext("2d");
tcanvas.width =W;
tcanvas.height =H;
total_area =W*H;
total_particles =928;
single_particle_area = total_area / total_particles;
area_length = Math.sqrt(single_particle_area);var particles =[];for(var i =1; i <= total_particles; i++){
particles.push(newparticle(i));}functionparticle(i){this.r = Math.round(Math.random()*255|0);this.g = Math.round(Math.random()*255|0);this.b = Math.round(Math.random()*255|0);this.alpha =1;this.x =(i * area_length)%W;this.y =(i * area_length)/W* area_length;/* randomize delta to make particles sparkling */this.deltaOffset = Math.random()*PULSATION_PERIOD|0;this.radius =0.1+ Math.random()*2;}var positions =[];functionnew_positions(){TEXT= TEXTArray[num];if(num < TEXTArray.length -1){
num++;}else{
num =0;}//alert(TEXT);
tctx.fillStyle ="white";
tctx.fillRect(0,0,W,H)//tctx.fill();
tctx.font ="bold "+QUALITY_TO_FONT_SIZE[QUALITY]+"px "+FANCY_FONT;//tctx.textAlign='center';//文本水平对齐方式//tctx.textBaseline='middle';//tctx.strokeStyle = "black";
tctx.fillStyle ="#f00";//tctx.strokeText(TEXT,30, 50);
tctx.fillText(TEXT,20,60);
image_data = tctx.getImageData(0,0,W,H);
pixels = image_data.data;
positions =[];for(var i =0; i < pixels.length; i = i +2){if(pixels[i]!=255){
position ={x:(i /2%W|0)*QUALITY_TO_SCALE[QUALITY]|0,y:(i /2/W|0)*QUALITY_TO_SCALE[QUALITY]|0}
positions.push(position);}}get_destinations();}functiondraw(){var now = Date.now();
ctx.globalCompositeOperation ="source-over";if(BLUR) ctx.globalAlpha =0.1;elseif(!BLUR&&!BLINK) ctx.globalAlpha =1.0;
ctx.fillStyle =BACKGROUND;
ctx.fillRect(0,0,W,H)if(BLENDING) ctx.globalCompositeOperation ="lighter";for(var i =0; i < particles.length; i++){
p = particles[i];/* in lower qualities there is not enough full pixels for all of them - dirty hack*/if(isNaN(p.x))continue
ctx.beginPath();
ctx.fillStyle ="rgb("+ p.r +", "+ p.g +", "+ p.b +")";
ctx.fillStyle ="rgba("+ p.r +", "+ p.g +", "+ p.b +", "+ p.alpha +")";if(BLINK) ctx.globalAlpha = Math.sin(Math.PI* mod *1.0);if(PULSATION){/* this would be 0 -> 1 */var mod =((GLOBAL_PULSATION?0: p.deltaOffset)+ now)%PULSATION_PERIOD/PULSATION_PERIOD;/* lets make the value bouncing with sinus */
mod = Math.sin(mod * Math.PI);}elsevar mod =1;var offset =TREMBLING?TREMBLING*(-1+ Math.random()*2):0;var radius =PARTICLE_RADIUS* p.radius;if(!ARC){
ctx.fillRect(offset + p.x - mod * radius /2|0, offset + p.y - mod * radius /2|0, radius * mod,
radius * mod);}else{
ctx.arc(offset + p.x |0, offset + p.y |0, radius * mod, Math.PI*2,false);
ctx.fill();}
p.x +=(p.dx - p.x)/10;
p.y +=(p.dy - p.y)/10;}}functionget_destinations(){for(var i =0; i < particles.length; i++){
pa = particles[i];
particles[i].alpha =1;var distance =[];
nearest_position =0;if(positions.length){for(var n =0; n < positions.length; n++){
po = positions[n];
distance[n]= Math.sqrt((pa.x - po.x)*(pa.x - po.x)+(pa.y - po.y)*(pa.y - po.y));if(n >0){if(distance[n]<= distance[nearest_position]){
nearest_position = n;}}}
particles[i].dx = positions[nearest_position].x;
particles[i].dy = positions[nearest_position].y;
particles[i].distance = distance[nearest_position];var po1 = positions[nearest_position];for(var n =0; n < positions.length; n++){var po2 = positions[n];
distance = Math.sqrt((po1.x - po2.x)*(po1.x - po2.x)+(po1.y - po2.y)*(po1.y - po2.y));if(distance <=5){
positions.splice(n,1);}}}else{//particles[i].alpha = 0;}}}functioninit(){new_positions();setInterval(draw,30);setInterval(new_positions,2000);}init();};</script><styletype="text/css">body{background: #000;text-align: center;font-family:"simhei"}canvas{margin: auto;position: absolute;left: 0;right:0;top: 0;bottom: 0;}</style><canvasid="canvas"width="1000"height="800"></canvas><divstyle="text-align:center;"><p><ahref=""title=""target="_blank"></a></p></div></body></html>
效果图
下面展示代码的部分效果图，完整的效果可以复制上述的代码之后运行即就可以了。
最后，谢谢大家的支持了。
本文转载自: https://blog.csdn.net/m0_54218263/article/details/127135049
版权归原作者 hhh江月 所有， 如有侵权，请联系我们删除。
版权归原作者 hhh江月 所有， 如有侵权，请联系我们删除。