はじめに
qiitaってレベル高い記事が多いですよね。
「初心者向け」って記事もかなり難しいものが多いように思います。
そこで、入門者向けのcanvasの記事を書いてみようと思います。
簡易ペイント作成をゴールにします。
これが全部できれば、
「canvas？知ってますよ！canvasでペイント作ったことありますよ。」ってイキれます(笑)
リンク
ここから問題のページへ飛べるようにしておきます。
基本編
問題1 塗りつぶそう
問題2 線分を描こう
問題3 三角形を描こう
問題4 三角形を塗りつぶそう
問題5 五角形を描こう
問題6 五角形を塗りつぶそう
問題7 円を描こう
問題8 円を塗りつぶそう
問題9 画像を貼りつけよう
イベント・アニメーション編
問題10 円をボタンを押して動かそう
問題11 円をタイマーで動かそう
問題12 円をマウスドラッグで動かそう
画像処理編
問題13 グレースケールしてみよう
問題14 2値化してみよう
問題15 モザイクしてみよう
卒業編
問題16 マウスドラッグで線を引いてみよう
問題17 マウスクリックで四角形を作成してみよう
問題18 canvasに描いた内容を保存、復元してみよう
問題19 簡易ペイントを作ってみよう
対応ブラウザ
Google Chromeのみ。
Chrome以外でも動くかもしれませんが
前提知識
HTMLがちょっと分かる。
JavaScriptがちょっとわかる(for文,if文が理解できるぐらい)
jQueryでイベント処理できる。(ボタンをクリックした処理が描ける程度)
これぐらい方を対象にしています。
canvasってどう書くの？
htmlファイルに以下のように書きます。
<canvas></canvas>
明示的にサイズ指定する場合は、以下のように書きます。
<canvas width="500" height="300"></canvas>
通常、スタイルではなくプロパティのwidth,heightを使います。
canvasって何ができるの？
線分を書いたり、多角形を塗りつぶしたり、画像を貼りつけたりすることができます。
また、行列を使って描いたものを平行移動、回転、拡大ができます。
ゴール
最終的に作ることになる「簡易ペイント」の仕様を記載します。
・マウスドラッグで線分群が描けること
・マウスクリックで四角形が作成できること
・マウスクリックで円が作成できること
・線分群、四角形、円の色を選択できること
・線分群、四角形、円の太さを選択できること
・四角形、円がマウスドラッグで動かせること
・四角形、円が削除できること
・描いた内容を保存できること
・保存した内容を復元できること
今はできる気がしないかもしれませんが、頑張っていきましょう。