本能の赴くままに線を引くのが芸術らしいけどようわからん
四角形はペペッとやってくれました。
それ以外で自由に描画を行う方法をやっていきましょう。
概念的な感覚だと、都度開始点終了点を決めて、線を引く(下書きってかこうしたいねって想定みたいな)を繰り返して
最後にその通り描画させる感じです。うーん ややっこしい
context.beginPath()
現在のパスをリセットする際に使用します。
現在のパス・・・・?
パスって何・・・?
パスとは
基本的に、パス、つまり好きな所に点を置いて、それをつなげていくってのが基本的な描画方法です。
で、その点の事を所謂パスと呼ばれます。
beginPathは描画前のパスを全部消します。
context.moveTo(x, y)
まず絵を描く時には、どこからスタートするの?を決めてあげましょう。
引数はみりゃわかんだろ!!!!(謎切れ)
context.lineTo(x, y)
moveToで指定した地点からどの位置まで線を引くかをきめます。
ちなみにこのx yに関しては常にcanvasの左上から行われる事に注意してください。
context.closePath()
開始座標と最終座標を結んでパスを閉じます。
context.stroke()
実際に線を描画します。
線描画の流れについて
線描画のための基本的なメソッドはまずはここまで。
実際に直線を描画するには以下の流れとなります。
- beginPathでまずはリセット
- moveToで開始点を決める
- lineToで開始点からどこまで線を引くか決める
- strokeで実線を引く
var canvas = document.getElementById('canvas01'); if (canvas.getContext) { var context = canvas.getContext('2d'); // 新しいパスを開始する context.beginPath(); // 100 30の位置に筆を置く context.moveTo(100,30); // 100 70の位置まで線を引くと決める context.lineTo(100,70); // 線引いちゃう context.stroke(); }
別線を引きたい
パスばかり追加していくと全て繋がっちゃいます。
別線として引きたい場合は、beginPathを上手に使ってあげましょう
var canvas2 = document.getElementById('canvas02'); if (canvas2.getContext) { var context2 = canvas2.getContext('2d'); // 新しいパスを開始する context2.beginPath(); // 100 30の位置に筆を置く context2.moveTo(100,30); // 100 70の位置まで線を引くと決める context2.lineTo(100,70); // 線引いちゃう context2.stroke(); // リセット context2.beginPath(); // 100 30の位置に筆を置く context2.moveTo(150,50); // 100 70の位置まで線を引くと決める context2.lineTo(150,90); // 線引いちゃう context2.stroke(); }