How to Make HTML5 Canvas Text Radial Line Animation

How to Make HTML5 Canvas Text Radial Line Animation: BY Steve25 Nov,2020; Tags:
HTML5 Canvas Text Effects

Introduction

We have shared a lot of text effects based on HTML5 and CSS3 before. The text effects we shared today are also based on Canvas. When the text is loaded, the text is composed of countless radial lines, forming a luminous effect.

How to Make HTML5 Canvas Text Radial Line Animation

Instructions

HTML Body Code

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);

txtH *= 1.5;

var bufferCanvas = document.createElement("canvas");
bufferCanvas.width = txtW;
bufferCanvas.height = txtH;
var buffer = bufferCanvas.getContext("2d");

var sx = (cw-txtW)*0.5
var sy = (ch-txtH)*0.5

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));  
  }
}

VIEW NOW