JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<canvas id="canvas"></canvas>

CSS

body { background-color: #000; font: 30px sans-serif; }
#canvas { background: #010101; }

JavaScript

/*
 * FPSクラスはKAYACさんのhttp://tech.kayac.com/archive/canvas-tutorial.htmlの記事を参考にさせて頂きました。
 *
 * wonderflに公開されているyooKoさんのパーティクル時計(http://wonderfl.net/c/pFz8)
 * をイメージしたんですが、ぼかしや残像は重すぎて断念・・・
 */

var cc;
var _width;
var _height;
var nowDisp = 0;
var cirNum = Math.PI * 2;
var particleNum = 800;
var particles = [];

var FPS = function(target) {
  this.target     = target;        // 目標FPS
  this.interval   = 1000 / target; // setTimeoutに与えるインターバル
  this.checkpoint = new Date();
  this.fps        = 0;
  };

FPS.prototype = {
  // checkからcheckまでの時間を元にFPSを計算
  check: function() {
    var now = new Date();
    this.fps = 1000 / (now - this.checkpoint);
    this.checkpoint = new Date();
  },
  // 現在のFPSを取得
  getFPS: function() {
    return this.fps.toFixed(2);
  },
  // 次回処理までのインターバルを取得
  getInterval: function() {
    var elapsed = new Date() - this.checkpoint;
    return this.interval - elapsed > 10 ? this.interval - elapsed : 10;
  }
}

var canvas = document.getElementById("canvas");

canvas.setAttribute("width", 500);
canvas.setAttribute("height", 500);
canvas.onclick = mouseClick;
_width = canvas.width;
_height = canvas.height;

cc = canvas.getContext("2d");
cc.fillStyle = "rgb(255, 255, 255)";
cc.textAlign = "left";
cc.textBaseline = "middle";
cc.font = "100px 'ＭＳ Ｐゴシック'";
cc.fillText('ろーでぃんぐ', 40, 300);

var num = particleNum;
while(num--){
  particles[num] = new particle();
}

fps = new FPS(30);
setInterval(process, fps.getInterval());

function process() {
  fps.check();

  var dispType = ['時計', 'テキスト'];
  cc.clearRect(0, 0, _width, _height);

  switch(nowDisp) {
    // 時計
    case 0:
      var textSize = 100;
      var text = timeDraw();
      var _getWidth = textSize*4;
      var _getHeight = textSize;
      var setX = _width/2 - textSize*2;
      var setY = _height/2 - textSize/2;

      cc.font = textSize+"px 'ＭＳ Ｐゴシック'";
      cc.fillText(text, setX, setY);
    break;

    // テキスト
    case 1:
      textSize = 100;
      text = 'テキスト';
      _getWidth = textSize...