view source

JavaScript

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

CSS

HTML

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

view-source:https://hi0a.com/demo/-js/js-canvas-move-text/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。