コンパイラかく語りき

import { Fun } from 'programming'

トップ > canvas > HTML5 canvasの練習１

HTML5 canvasの練習１

canvas

どうも！chuckです

 

仕事ではずっとHTML4.01を使っていたんですが、最近ようやくHTML5への興味が湧いてきました。

ので、代表的な機能であるCanvasについて勉強しました！

 

○基本を学ぶ

まずこちらのサイトで基本を学びました。

www.html5.jp

2800ブクマされてて驚きました！もうたくさんの人がチェックしてるんですね！！

 

 

○実例を学ぶ

お次により実践的な例を学びました。

yoppa.org

 

後半の動くCanvasがすごかったです。。。

いや実際には動いていなくて、ものすごい速さで再描画してるんですけどね。それでもすごい。

 

というわけで、コードをまねて自分なりに改変してみました！

①中心から放射状に広がる

f:id:chuck0523:20150605230128p:plain

DEMO

http://chuck0523.github.io/canvasMuseum/canvasPractise/canvas1.html

 

②左上から出てきて直線上に進む。(跳ね返りなし)

f:id:chuck0523:20150605230246p:plain

DEMO

http://chuck0523.github.io/canvasMuseum/canvasPractise/canvas2.html

 

 

③中心点からひたすら飛び出てくる

f:id:chuck0523:20150605230401p:plain

DEMO

http://chuck0523.github.io/canvasMuseum/canvasPractise/canvas3.html

 

 

④うねうね増殖する(キモめ)

f:id:chuck0523:20150605230504p:plain

DEMO

http://chuck0523.github.io/canvasMuseum/canvasPractise/canvas5.html

 

 

⑤ここらへんからオリジナル要素出てくる

f:id:chuck0523:20150605230700p:plain

DEMO

http://chuck0523.github.io/canvasMuseum/canvasPractise/canvasPractise/canvas1_1.html

 

 

⑥ちょっといい感じの背景パーツっぽいやつ

f:id:chuck0523:20150605230855p:plain

DEMO

http://chuck0523.github.io/canvasMuseum/canvasPractise/canvas1_2.html

 

 

○以上

以上が練習で作ったCanvasたちです(｀･ω･´)ゞ

実際に手を動かすことでだいぶ慣れることが出来ました。そして少し数値をいじるだけでだいぶ挙動が変わったりするので面白かったです。

 

○次の目標

ここで上げた例って、時間経過で再描画をしてるんですよね。

でもCanvasには何やら「MouseDown」とか「MouseMove」といったイベント要素もあるようです。

なので、イベントに対して描画を変化させるのが次の目標です！

 

では！ヽ(｀▽´)/