twitterにどうぞ。この広告は、90日以上更新していないブログに表示しています。Inspectorは実は様々な物を表示できる。コンソールでライフゲームを表示することができる。Gameに、コードを置いた。タイミングによっては上手く動かないので、コンソール上でCmd+Rなどを押してリロードすると上手くいく。以下に、実装に使ったハックや技術を紹介するconsole.logで色付き文字を表示するまず、console.warnやconsole.infoなどを使うと、黒字以外の文字を表示できることを思い出してほしい。console画面は、HTMLで実装されているのである。"aa");のように、printf形式で文字を表示できる機能があることを知っているだろうか。この中に、色指定をするためのものがある。red;");とすると、helloと表示される。backgroundなどが使用できる。black;");とすると、大きな文字と、ボーダーの枠が表示される。url('http://example.com/image.jpg')");なんとできるのである。あとは、想像の通り、CSSを微調整すれば背景画像だけを表示することができる。アニメーションアニメーションに必要なのは、リフレッシュ、つまり次の画像を、前と同じ位置に表示することである。これはどうするかというと、console.clear()を使用する。ここで大きな問題がある。console関数は全て非同期に動作するのだ。console.clear();console.log('a');とすると、aが表示される保障はない。今回のハックでは、console.clear()のタイミングを20ms程度、console.logより前にずらすことで、clear()がlog()より前に呼ばれることをある程度保障している。アニメーション自体は、canvasを使用した。toDataURL()を使用して得た画像を、background-imageとしてセットしている。念のため以下に、全コードを載せておく。doの見分け方と使い方についてなどArchiveはてなブログをはじめよう!javascripterさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。