点と点を線で滑らかにつなぐ
点ではなく線で描くには、マウスボタンが押された時の座標を変数に保存しておき、マウスが移動したら以前の座標と現在の座標を直線で描画します。描画したら現在の座標値を以前の座標値を保存している変数に入れます。これで一般的なお絵かきツールと同じような描画ができます。
Canvasでは「パスを作成」し、そのパスに対して「線として描画」すると直線を描けます。単純に描画する座標とサイズを指定するだけだった四角形に比べると少々複雑ですが、複雑な図形も描けるようにするため、このような仕組みになっています(*1)。パスは以下のような手順で作成します。
- beginPathでパスの作成を開始
- moveToで描画開始座標に描画位置を移動
- lineToなどでパスを生成（この段階では描画されません）
- パスを生成し終わったらstrokeで線を描画
- closePathでパスを閉じる
直線の場合は、moveToで開始座標に移動してからlineToで終了座標を指定します。この段階でmoveToには以前の座標値を、lineToに現在のマウスの座標値を設定することで、点と点を結ぶ直線を描けます。
線を描くときには、線の色と幅を指定する必要があります。線の色は四角形の場合と同じように、strokeStyleに"rgba(255,0,0,1)"として設定します。線の幅はlineWidthに指定します。「1」であれば1ピクセルの線幅を指定したことになります。
ここまでをまとめたものがサンプル03です。マウスボタンを押したままカーソルを動かすと、点ではなく線で絵が描かれます。これで一般的なお絵かきツールと同じような動作になりました。
サンプル03の実行画面。マウスボタンを押したまま動かすと、滑らかに線を描く
●サンプル03[JavaScript:draw.js]
var drawFlag = false;
var oldX = 0;
var oldY = 0;
window.addEventListener("load", function(){
var can = document.getElementById("myCanvas");
can.addEventListener("mousemove", draw, true);
can.addEventListener("mousedown", function(e){
drawFlag = true;
oldX = e.clientX;
oldY = e.clientY;
}, false);
can.addEventListener("mouseup", function(){
drawFlag = false;
}, false);
}, true);
// 描画処理
function draw(e){
if (!drawFlag) return;
var x = e.clientX;
var y = e.clientY;
var can = document.getElementById("myCanvas");
var context = can.getContext("2d");
context.strokeStyle = "rgba(255,0,0,1)";
context.lineWidth = 1;
context.beginPath();
context.moveTo(oldX, oldY);
context.lineTo(x, y);
context.stroke();
context.closePath();
oldX = x;
oldY = y;
}
*1 古いところではPostScript言語が同じ方法で図形を描く仕組みになっています。PostScript言語を知っている人ならCanvasのメソッドもすぐに理解できるでしょう。Adobe Illustratorもパスで図形を描くアプリケーションで、PostScriptプログラムを出力します。
