js实现文字放射性走光动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现文字放射性走光动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> body{ background: #000;overflow: hidden }</style> </head> <body> <canvas id="canvas"></canvas> <script> var txt = "BFW"; var txtH = 100; var font = "sans-serif"; var bg = "#000"; var rayColor1 = "#e0f7fa"; var rayColor2 = "#18ffff"; var fade = 1000; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width = window.innerWidth; var ch = canvas.height = window.innerHeight; var w2 = cw/2; var h2 = ch/2; var pi = Math.PI; var pi2 = pi*.5; var txtCanvas = document.createElement("canvas"); var txtCtx = txtCanvas.getContext("2d"); txtCtx.font = txtH + "px " + font; txtCtx.textBaseline = "middle"; var txtW = Math.floor(txtCtx.measureText(txt).width); txtCanvas.width = txtW; txtCanvas.height = txtH*1.5; var gradient = ctx.createRadialGradient(w2, h2, 0, w2, h2, txtW); gradient.addColorStop(0, rayColor2); gradient.addColorStop(1, rayColor1); ctx.strokeStyle = gradient; txtCtx.fillStyle = gradient; txtCtx.font = txtH + "px " + font; txtCtx.textBaseline = "middle"; txtCtx.fillText(txt,0,txtH*.5); //dirty adjust for descends txtH *= 1.5; var bufferCanvas = document.createElement("canvas"); bufferCanvas.width = txtW; bufferCanvas.height = txtH; var buffer = bufferCanvas.getContext("2d"); //text start position var sx = (cw-txtW)*0.5 var sy = (ch-txtH)*0.5 ////generate data var rays = []; var txtData = txtCtx.getImageData(0,0,txtW,txtH); for (var i = 0; i < txtData.data.length; i+=4) { var ii = i/4; var row = Math.floor(ii/txtW) var col = ii%txtW var alpha = txtData.data[i+3] if(alpha !== 0){ var c = "rgba(" c += [txtData.data[i],txtData.data[i+1],txtData.data[i+2], alpha/255 ] c += ")"; rays.push(new Ray(Math.floor(ii/txtW), ii%txtW, c)); } } var current = 1; //st.........完整代码请登录后点击上方下载按钮下载查看
网友评论0