document.title = '文字ノイズ　ハッカープログラミング演出';

var style = document.createElement('style');
style.innerText = 'html,body{overflow:hidden;cursor:none;user-select:none;}';
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);

var hue = 90;
canvas.setAttribute('width',w);
canvas.setAttribute('height',h);
let demo = document.getElementById('demo');
demo.appendChild(canvas);


let styleImg = document.createElement('style');
styleImg.innerText = '#demo img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:100vh;opacity:1;cursor:none;}';
document.getElementsByTagName('head').item(0).appendChild(styleImg);
let img = document.createElement('img');
demo.appendChild(img);
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D';

let search = location.search.slice(1);
let params = new URLSearchParams(search);
let q = params.get('q');
if(q){
  img.src = q;
}

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 = 'qwertyuioppasdfghjklzxcvbnm';
var pace = 99;
var max = 999;

ctx.font = '16px serif';
if(location.search){
  text = location.search.substring(1);
  text = decodeURI(text);
  color = '#f00';
  ctx.font = '48px serif';
  pace = 199;
  max = 99;

}
$(function(){
  let key = getURLKEY();
  if(key){
    text = key;
    pace = 299;
  }
})



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);
  ctx.lineWidth = lw;
  ctx.fillStyle = color;
  tlen = text.length;
  for(i=0;i<max;i++){
    var x = Math.random()*w;
    var y = Math.random()*h;
    var t = text[Math.floor(Math.random()*tlen)];
    ctx.fillText(t, x, y);
  }
}
draw();
setInterval(function(){
  t++;
  draw()
},pace);




// ファイルアップロード
var dragArea = document.getElementById('demo');
dragArea.classList.add('ready');
dragArea.addEventListener('dragstart', function(event){
  event.dataTranfer.addElement(container);
});
dragArea.addEventListener('dragover', function(event){
  event.preventDefault();
  this.classList.add('drag');
});
dragArea.addEventListener('dragleave', function(event){
  event.preventDefault();
  this.classList.remove('drag');
});
dragArea.addEventListener('drop', function(event){
  event.preventDefault();
  this.classList.remove('drag');
  console.log(event.dataTransfer.files);
  if(!event.dataTransfer.files.length){
    return;
  }
  var file = event.dataTransfer.files[0];
  fileName = file.name.substring(0,12).split('.')[0] || 'name';
  console.log(file);

  var reader = new FileReader();
  reader.readAsDataURL(file)

  reader.addEventListener('load', function(){
    var dataURL = reader.result;
    console.log(dataURL);

    var newImage = new Image();
    img.src = dataURL;
    newImage.src = dataURL;
    newImage.onload = function(){
    }
  });
});


let opacity = 1;
img.addEventListener('click', function(ev) {
  opacity -= 0.2;
  if(opacity < 0.4){
    opacity = 1;
  }
  img.style.opacity = opacity;
}, false );



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-noize-text/