document.title = '動き回る文字';

var style = document.createElement('style');
style.innerText = 'html,body{overflow:hidden;cursor:crosshair;}';
document.getElementsByTagName('head').item(0).appendChild(style);

var canvas = document.createElement('canvas');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var min = Math.min(w,h);
canvas.setAttribute('width',w);
canvas.setAttribute('height',h);
let demo = document.getElementById('demo');
demo.appendChild(canvas);

var ctx = canvas.getContext('2d');
var cx = w/2;
var cy = h/2;
var t = 0;
var bgcolor = '#000';
var color = '#0f0';
var lw = 2;
var text = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var pace = 9;
var max = 999;
var players = [];
var fontSize = 48;

if(location.search){
  text = location.search.substring(1);
  text = decodeURI(text);
  color = '#f00';
  fontSize = 80;
  pace = 9;
  max = 19;

}

$(function(){
  let key = getURLKEY();
  if(key){
    text = key.replace(/:.*/,'');
    pace = 9;

    $input = $('<input>',{placeholder:'なんてかいてある？'});
    $input.focus();
    $input.css({
      backgroundColor:'rgba(0,0,0,0.6)',
      color:'#fff',
      border:'1px solid #aaa',
      width:'100%',
      position:'absolute',
      bottom:0,
      left:0,
      boxSizing:'border-box',
      fontSize:'24px',
    });
    $input.on('change',function(){
      var v = $(this).val();
      if(v.length > 7 && text.match(v)){
        hint = key.replace(/.*:./,'');
        $(this).val(hint);
      }
    });
    $('#demo').append($input);

  }
})

//********************************************
var Player = function(_param){
  var that = this;
  var param = _param || {};
  var x = param.x || w/2;
  var y = param.y || h/2;
  var text = param.text || '.';
  var font ={};
  var isRotate = false;
  var deg = 0;
  if(Math.random()*9 > 3){
    isRotate = true;
    deg = Math.random()*360;
    dDeg = Math.random()*30;
  }
  var size = fontSize + Math.random()*fontSize;


  var dx=Math.random()*min/20-min/40;
  var dy=Math.random()*min/20-min/40;

  var fixSpeed = function(){
    if(x<w*1/20 || x>w*19/20){
      dx =-dx;
      x+=dx*2;
      dx = Math.random()*min/20-min/40;
      dy = Math.random()*min/20-min/40;
      if(Math.abs(dx)<min/160){
        dx = dx * (Math.random()*2+1);
      }
      if(Math.abs(dy)<min/160){
        dy = dy * (Math.random()*2+1);
      }
    }
    if(y<h*1/20 || y>h*19/20){
      dy =-dy;
      y+=dy*2;
      dx = Math.random()*min/20-min/40;
      dy = Math.random()*min/20-min/40;
      if(Math.abs(dx)<min/160){
        dx = dx * (Math.random()*2+1);
      }
      if(Math.abs(dy)<min/160){
        dy = dy * (Math.random()*2+1);
      }
    }
  }

  that.draw = function(){
    x+=dx;
    y+=dy;
    fixSpeed();

    color = 'rgba(255,255,255,1)';
    //canvas.style.letterSpacing = '-2px';
    font.size = 32;
    //ctx.font = 'bold ' +font.size+'px';
    //ctx.textAlign = 'center';
    ctx.save();
    if(isRotate){
      ctx.translate(x, y);
      deg += dDeg;
      rad = (deg * Math.PI) / 180;
      ctx.rotate(rad);
      ctx.translate(-x, -y);
    }
    ctx.fillStyle = color;
    ctx.font = size+'px serif';
    ctx.fillText(text , x, y);
    ctx.restore();
  }
  return that;
}




function getRandomColor(){
  var ch = Math.floor(Math.random()*360);
  //var r = Math.floor(Math.random()*128)+128;
  //var g = Math.floor(Math.random()*128)+128;
  //var b = Math.floor(Math.random()*128)+128;
  var color = 'hsl('+ch+',100%,50%)';
  return color;
}

function setRandom(){
  bgcolor = getRandomColor();
  color = getRandomColor();
  lw = Math.random()*8+1;
}

function draw() {
  ctx.clearRect(0, 0, w, h);
  ctx.fillStyle = bgcolor;
  ctx.fillRect(0, 0, w, h);

  players.forEach(function(player){
    player.draw();
  });

}

draw();
setTimeout(function(){
  for(i=0;i<text.length;i++){
    //console.log(text[i]);
    players.push(new Player({x:Math.random()*w*7/8+w/10,y:Math.random()*h*7/8+h/10,text:text[i]}));
  }
},199);
setInterval(function(){
  t++;
  draw();
},pace);






document.oncontextmenu = function () {return false;}
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  console.table({w:canvas.width, h:canvas.height});
  w = document.body.clientWidth;
  h = document.body.clientHeight;
  cx = w/2;
  cy = h/2;
}

window.onresize = resize;
window.addEventListener('click', function() {
  //resize();
  //document.body.requestFullscreen();
}, false );

window.addEventListener('dblclick', function() {
  setRandom();
}, false );

document.addEventListener('fullscreenchange',function(e){
  resize();
});

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-canvas-move-text/?key=U2FsdGVkX18y8pSS1txo+7c5dV4YN0sMOv4RSb7FzItQAtOsGoSfLWmf0nOtYLdWN0vvAQ5DcySuaL5wHVu07g%3D%3D