コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

Canvasをやる II ~前編

ちゃんと使い方を覚えようと思った II

はい、どうも僕です。Canvasとは人生であり哲学です。そういう悟りの境地に至ったので本日もCanvasを触っていこうと思います。

Canvas APIJavaScript と HTML の <canvas> 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。

ちなみに上で連呼しているCanvasはこれのことです。哲学も人生の真理もあったものでないですね……。


前回記事
inujini.hatenablog.com

謎の脱線記事
inujini.hatenablog.com
ブギーボード代わりに使うには軽いし保存も聞くのでありだと個人的に思ってるんですよコレ。



途中謎の脱線をした気がしたけどもCanvasを覚えるぞーって気持ちにまたなったので覚えことにしました。


Canvasチュートリアルやっていく

今回はここのやつやっていきます。
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()です。以上!!


とまあそんな感じでいけるっぽいです。前後編に分けるつもりはなかったけども次回アニメーション編らしいのでアニメーション用の文法をしっかり抑えてからまとめようと思ったので後編にわけることにしました。まあ、後編いつ更新するのか知らんですけどね……。


つづく