東北沖大地震を受け、立ち上がったリュウプロジェクト。
公式サイトではないのですが、活動を知ってすぐに作った非公式サイトです。（ただのファンサイトですが）
現在では素晴らしい公式サイトがありますので、ぜひそちらもご覧になってみてくださいね。
▼非公式サイト
▼公式サイト
※BGMがあるので、音量に注意してください。
2011年12月のエントリー 一覧
友人の保坂歩先生が原作者。噂屋の非公式サイトを結構前から公開しています。理由としては単純明快で、公式サイトが見当たらないから、いっそ自分で作っちゃおうかなーと思ったり、自分の好きなもので公式サイトがなかったらこうして勝手に制作しちゃおうかなーと思ったりしました。
というわけで、メリー・クリスマス！
canvas要素は、JavaScriptを使うことで3Dアニメーションも可能としています。
canvas要素は、JavaScriptを使うことで様々なアニメーションを可能にしています。
3Dも対応しているのですが、非常に長いスクリプトになるので、今回は簡単な動きを実装します。
黒点をキャンバス内ではねさせる。これだけです。
一個だけでは寂しいのでたくさん跳ねさせてみました。
canvas要素は、JavaScriptで制御できるので、プログラムによるアニメーションを実現することも可能です。
ただし、アニメーションを実現する上で注意しなければならないのは、キャンバスに一度書いてしまったグラフィックスはその後動かすことができない、という点です。
例えば、キャンバスをしようしてアナログ時計のアニメーションを作成することを考えて見ましょう。1秒毎に角度を変えて秒針を描画します。
これ自体は大した処理ではありません。問題なのは1秒前に描画した秒針が残り続けることです。
これを避けるためには、新しい秒針を描画すると同時に古い秒針を消す必要があります。
このように、キャンバスを用いたアニメーションを作成する場合は、前に書いたグラフィックスをクリアするという作業が必要になります。
こうなると、パフォーマンスのことを考えてクリアする範囲を絞り込みたいところですが、そうするとクリアする処理を再描画する処理のコードが複雑になるのは避けられません。
そのため、多くの場合は一定間隔毎にキャンバス全体を描画し直すほうが、楽にアニメーションを実現できます。
canvas要素は、グラフィックスの自由な描画が可能な領域を表します。
キャンバスは固定の幅と高さを持ち、その範囲内であれば、丸や四角ばどの図形や線、画像などの2Dグラフィックスを自由に描画することができます。
キャンバスを用いるために必要な準備はごくわずかで、canvasタグをHTML内に記述するだけです。
↑画像ではないです。
<canvas id="canvas1" width="300" height="200"></canvas>
上記では縦200px、横300pxの背景が透明なキャンバスを定義することができました。
このキャンバスに対して、描画を行うにはcanvas要素が持つgetContex()を利用し、描画コンテキストを取得する必要があります。
HTML5では数多くの属性や要素が追加されると同時に、廃止になったものも数多く存在します。
下記に廃止された（もしくは非標準の）要素のみ紹介します。
HTML5になって新しく加わった要素の簡易リファレンスです。
宮城県仙台市在住のWebデザイナーです。Webデザインからコーディング、SEO対策とかもうWeb制作に関わることはなんでもやっちゃいます。