2018 エイプリル

記事の文言

ただ今、当ブログの背景が虫に侵食されており、たいへん見づらい状況になっております。早急に対処しておりますが、現時点では復旧の目処は立っておりません。大変申し訳ありませんが、暫くの間我慢して閲覧してください。

ソース

(function(window,document){
	var a=document.createElement("canvas");
	a.setAttribute("style","position:fixed;top:0;left:0;z-index:-999;");
	a.width=window.innerWidth;
	a.height=window.innerHeight;
	var b=a.getContext("2d");
	b.lineWidth=10;
	b.lineCap="round";
	b.lineJoin="round";
	b.strokeStyle="#aaa";
	b.beginPath();
	var c={x:window.innerWidth/2,y:window.innerHeight/2,n:0,_:null};
	b.moveTo(c.x,c.y);
	var d=()=>Math.random()>0.5?-1:1;
	var e=()=>{
		c.x+=d()*(Math.random()*9+1);
		if(c.x>window.innerWidth)c.x=window.innerWidth-10;
		else if(c.x<0)c.x=10;
		c.y+=d()*(Math.random()*9+1);
		if(c.y>window.innerHeight)c.y=window.innerHeight-10;
		else if(c.y<0)c.y=10;
		b.lineTo(c.x,c.y);
		b.stroke();
		c.n++;
		if(c.n>1800)return;
		c._=window.requestAnimationFrame(e);
	};
	document.body.appendChild(a);
	c._=window.requestAnimationFrame(e);
})(window,window.document);

あとがき

特に何も考えずに30分位で作成したプログラムでした。canvasに高速で描画している上に最後までパスを一度も閉じていないため、地味にCPUリソースを使います。30秒で止めるようにしているのはそのせい。一応requestAnimationFrameを使っているので、クラッシュすることは無いと思います。

ちなみに当ブログは記事内で背景色を指定している要素が殆ど無いため、最背面に表示できています。このページでもこのコードが動いてはいますが、ソースコードの表示部分は背景色が指定されているので、おそらくほとんど見えていないことと思います。

canvasを最前面に表示する(画面のどこかをクリックすると元に戻ります)

っという、気合が入っていない上に、くっだらないエイプリルフールを1人でやってました。