今回はここのやつやっていきます。
Canvas tutorial - Web APIs | MDN
日本語版はリンクが色々死んでいるのでアメリカ語版で見ていきます。
とりあえず何はともあれ練習用のテンプレートをこんな感じに作りました。
そんでシェイプの使い方はこうです。
以前触っていたよりも複雑な使い方してた。ちゃんと読み込むと色々為になりますね……。多分僕お絵描き部分コピペで済ましてしまうだろうけど……。パックマンのやつとかヤバい。
var canvas = document.getElementById('YourId');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
}
そういえば、この書き方にすることでifの中にお絵描きパートをねじ込めるようになって個人的には見やすくできたと思ってる。ただこの使い方がよしとされるものなのかは知らない、ctx 使いまわすなって怒られてるし……。あとgetContextができない場合はnullが返るけどもエラーメッセージでちゃう。
まあいいや。やりながら修正かけていきます。次行きます。カラーはこう。
アニメーションみたいな再描画処理するとctxがよくわかんない挙動するので以下に修正。var型のスコープ範囲舐めてた、そっか関数スコープだから上書きされると描画おかしくなるのか……。if関数じゃないもんね……。
const canvas = document.getElementById('YourId');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
}
とまあ、関係ないスコープの方で止まってしまったがカラーの描き方は上のような感じらしい。お絵描きとして使う機会があればどっかからベースのやつをパクッって参考にして使うと思うので実は中身をあんまり見てなかったりする。
それじゃあ次行きましょう。お次はテキストです。
こうです。特にお絵描き要素もないので喋ることないっ！次っ!!
次行きます。画像見ていきます。
画像に関しては以前の書き方で大丈夫っぽい。書くたびにコードが変化してるから何が大丈夫の基準になっているのかよくわかんないけど……。自分が納得していればいいんだよ（よくない）。ということで画像に関しては特に問題なさそうだったので次行きます。
変形みていきます。
主にcontext.save()とcontext.restore()に関しての話。それさえわかればいけると思った。それをお絵描き描画に落とし込めるかはまた別の話ですけどね。
次、クリッピングみていきます
抑えるべき要素はclip()です。以上!!
とまあそんな感じでいけるっぽいです。前後編に分けるつもりはなかったけども次回アニメーション編らしいのでアニメーション用の文法をしっかり抑えてからまとめようと思ったので後編にわけることにしました。まあ、後編いつ更新するのか知らんですけどね……。
つづく
