スクリーントーン

等間隔で埋め尽くすドット


  view source
  JavaScript
  document.title = 'スクリーントーン';
//等間隔で埋め尽くすドット

let { canvas, ctx, cx, cy, w, h, min, demo } = readyCanvas();


ctx.fillStyle = '#000000';

function drawScreenTone(){
  ctx.clearRect(0,0,w,h);
  const size1 = Math.random()*3+0.5;
  const size2 = size1*2+Math.random()*3;
  const w1 = size1;
  const h1 = size1;
  const w2 = size2;
  const h2 = size2;
  for (let y = 0; y < h; y += h2) {
    for (let x = 0; x < w; x += w2) {
      ctx.fillRect(x, y, w1, h1);
      ctx.fillRect(x+w2/2, y+h2/2, w1, h1);
    }
  }
}

drawScreenTone();
canvas.addEventListener('click', drawScreenTone);
setInterval(drawScreenTone, 1000*30);
  CSS
  
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/game/canvas-screen-tone/
  
  ABOUT
  
    hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    仕様変更、API廃止等、実験途中で動かないページもあります。