【HTML/JavaScript】Canvasを学んでいく

投稿日:

プログラミング初心者の勉強ブログ #102

ドットインストールの「HTML5 Canvas入門」でcanvasタグを学習。JSを使ってcanvasで図形を描画する流れのまとめ。自分の好きな図形を作成でき、イベントもアニメーションも設定できるので相当幅が広がる気がする。

 

目次

 

canvasで出来ること

HTMLのcanvasタグは、

html側でcanvasタグを書き込み、JS側でcanvas要素を「contextオブジェクト」として取得し操作していくことで、様々な図形を自分で描画できる。また、自分で描画した図形に対しアニメーションやイベントアクションを加えることも可能。

  • 図形の描画
  • グリッドの描画
  • テキストの表示
  • 画像の表示
  • アニメーション化
  • イベントオブジェクトの設定

使いこなしたらブラウザ上に表示されるほとんどの表現を、canvasで作れるのではないかと思う。

ちなみにドットインストールではcanvas入門として、

canvas

このようなアニメーションをcanvasで作成する。車はクリックで動き出し、もう一度クリックすると止まるようになっている。

以下ではcanvasを操作するために用いるcontextオブジェクトを、JSで取得し設定するために必要なメソッド類をまとめていく。

 

初期化関係

html

 

js

基本的に操作は全てJSで行う。イベントオブジェクトと同様、コンテキストオブジェクトをまず生成しなければならない。canvasは非対応ブラウザも存在するため、undefinedの分岐を加えておく必要がある。

 

矩形の描画

strokeRect

strokeRectは枠線のみの図形の描画を行う。

 

fillRect

fillRectは塗りつぶした矩形の描画を行う。使い方はstrokeRectと同じ。

 

clearRect

fillRect指定した矩形の形で透明にくりぬけ、画面を一旦クリアにするときなどに利用できる。使い方は上2つと同じ。

 

矩形以外の図形をpathで描画

座標を指定した図形

自分で座標を指定し、その座標からなる図形の描画する。beginPathで開始宣言、closePathで終了宣言となる。指定した図形はfullで塗りつぶしができ、strokeで線の描画ができる。

 

円弧

円弧の場合もpathを使う。arcは弧度法(ラジアン)で円弧の形を指定する。リファレンスをみてて動かさないと動きは掴めない。

参考:CanvasRenderingContext2D.arc() - MDN

 

スタイルの設定

描画の前にスタイルを指定する。線や塗りつぶしだけでなく、影やグラデーションもそれぞれメソッドが存在する。

 

テキストの表示

fillTextの第一引数に表示したいテキストを入れる。

 

画像の表示

canvasでも画像を操作できる。

 

まとめ

今回やったドットインストールの「HTML5 Canvas入門」は、最後の方にリファクタリングを教えてくれる。なんかもう感動するくらいサラサラとメソッドが整理され、ごちゃごちゃしていたコードがあっという間にオブジェクト指向設計されていく。現状ドットインストールのレッスンを400くらい受けているが、いよいよまじで尊敬してしまいそう。とりあえず真似して自分でも違うレッスンでやったJSのコードをリファクタリングしてみるものの、変数にするべきなのかプロパティ化するべきなのか判断基準がイマイチわからない。変数のスコープを意識して、できる限り狭める感覚はなんとなくだがわかってきたかもしれない。これからJS書くときは、何回も使う変数は宣言と代入を分けて書こうと思う。自力である程度設計できるようになりたい。RailsよりJSの方がオブジェクト設計の勉強になっている。

以上ありがとうございました。

-プログラミング学習
-, ,

Copyright© s u p ? , 2019 All Rights Reserved.