#はじめに
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って何ができるの？
線分を書いたり、多角形を塗りつぶしたり、画像を貼りつけたりすることができます。
また、行列を使って描いたものを平行移動、回転、拡大ができます。
#ゴール
最終的に作ることになる「簡易ペイント」の仕様を記載します。
・マウスドラッグで線分群が描けること
・マウスクリックで四角形が作成できること
・マウスクリックで円が作成できること
・線分群、四角形、円の色を選択できること
・線分群、四角形、円の太さを選択できること
・四角形、円がマウスドラッグで動かせること
・四角形、円が削除できること
・描いた内容を保存できること
・保存した内容を復元できること
今はできる気がしないかもしれませんが、頑張っていきましょう。