view source

JavaScript

document.oncontextmenu = function () {return false;}

document.createElement('canvas');
var canvas = document.createElement('canvas');
canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);

var div = document.getElementById('demo');
div.appendChild(canvas);

var ctx = canvas.getContext('2d'); 
//var idata = ctx.createImageData(canvas.width, canvas.height);
//var buffer32 = new Uint32Array(idata.data.buffer);
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  console.table({w:canvas.width, h:canvas.height});
}
resize();
window.onresize = resize;

function noise(ctx) {
    
    var w = ctx.canvas.width,
        h = ctx.canvas.height,
        idata = ctx.createImageData(w, h),
        buffer32 = new Uint32Array(idata.data.buffer),
        len = buffer32.length,
        i = 0;

    for(; i < len;)
        buffer32[i++] = ((255 * Math.random())|0) << 24;
    
    ctx.putImageData(idata, 0, 0);
}

var toggle = true;

// added toggle to get 30 FPS instead of 60 FPS
(function loop() {
    toggle = !toggle;
    if (toggle) {
        requestAnimationFrame(loop);
        return;
    }
    noise(ctx);
    requestAnimationFrame(loop);
})();



canvas.style.cursor = 'crosshair';
document.getElementsByTagName('body')[0].style.overflowX = 'hidden';
document.getElementsByTagName('body')[0].style.overflowY = 'hidden';






window.addEventListener('click', function() {
  resize();
  document.body.requestFullscreen();
  for(let i=0;i<9;i++){
    let bgm = new Audio("tv-noize.mp3");
    bgm.currentTime = i;
    bgm.loop = true;
    bgm.volume = 0.01;
    bgm.play();
  }
}, false );

window.addEventListener('dblclick', function() {
  //document.body.requestFullscreen();
  //canvas.requestFullscreen();
  //document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
}, false );

document.addEventListener('fullscreenchange',function(e){
  resize();
});
//全画面にするとノイズが表示されない
//また通常時でもノイズは画像をコピーで再現されない

CSS

HTML

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

view-source:https://hi0a.com/demo/-js/js-canvas-tv-noize/

ABOUT

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

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

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

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

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

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

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