Clever Geek Handbook

Webページのバックグラウンドで複雑な迷路を作成する（クライアント上）

この記事の著者がサーバー上で画像を生成したいという欲求に、私には少し奇妙に思えましたが、最新のブラウザではクライアント上でこれを行うことができます。 したがって、私は別の、またはむしろ2つの背景生成方法を提供したいと思います。



すぐに予約を行います。ほとんどの場合、変更しない限り、最新のすべてのブラウザーで動作しません（LinuxのChrome 24およびFF 16でのみテスト済み）。



背景画像



ご存知のように 、CSS3のbackground-imageでは、複数の背景画像ファイルを指定し、それらの座標を背景位置に配置できます。 したがって、2つの小さな画像を「シフト」するだけで、たとえば次のコードでランダムな迷路を生成できます。 



var images = []; //    var positions = []; //  var l = 26; //   (  ) var src = ['1.png', '2.png']; var body = document.getElementsByTagName('body')[0]; var w = body.scrollWidth/l; var h = body.scrollHeight/l; for(var i=0;i<h;i++){ for(var j=0;j<w;j++){ images.push('url('+src[Math.round(Math.random())]+')'); //    positions.push(j*l+'px '+i*l+'px'); //    } } //    body.style.backgroundImage = images.join(', '); body.style.backgroundPosition = positions.join(', '); body.style.backgroundRepeat = "no-repeat";




このような迷路は動的に更新するのが非常に簡単であると推測することは難しくありません。たとえば、次のようなものです。 



  for(var i=0;i<images.length*0.05;i++){ images[Math.floor(images.length*Math.random())]=('url('+src[Math.round(Math.random())]+')'); } body.style.backgroundImage = images.join(', '); body.style.backgroundPosition = positions.join(', '); body.style.backgroundRepeat = "no-repeat";




この方法の重大な欠点は、要素を不適切なサイズに膨らませることに加えて、非常に遅いことです（同じ理由で思われます）。



キャンバス+ブロブ



少し考えてから、Canvas + Blobで実装できると決めました。 本質はおよそ次のとおりです。



結果のURLはbody.style.backgroundImageプロパティに割り当てられます： 



  var body = document.getElementsByTagName('body')[0]; canvas.toBlob(function(blob){ var url = URL.createObjectURL(blob); body.style.backgroundImage = "url('" + url + "')"; })




ここでの真実には欠点がないわけではありません。 backgroundImageを更新すると、背景が一瞬消えます。 これは非常に簡単に修正できますが、たとえば、ロード時間に画像を重ねることで： 



  var url = URL.createObjectURL(blob); body.style.backgroundImage += ", url('" + url + "')"; body.style.backgroundRepeat = "no-repeat"; setTimeout(function(){ body.style.backgroundImage = "url('" + url + "')"; },200);




例1（背景画像）

例2（キャンバス+ Blob）



おそらくそれだけです。 既製の安定したクロスブラウザー（など）ソリューションを作成するという目標は設定しませんでした。背景画像を生成する問題を解決するための、より合理的なアプローチを説明したいだけです。



追伸私は記事を書いた経験がほとんどないので、何かが間違っていてもあまり誓わないでください。


More articles:


All Articles