canvasで直線を描く

さて前回作ったcanvasの雛形のjavascritp内に命令を書いてcanvas内に何かを描画していきましょう。
今回は基本の線を描きます。
線を描くには始点と終点を設定し、描画の命令を出します。この始点と終点の設定をパスといい、最初にbeginPath()でこのパスをリセットします。
始点はlineTo()メソッド、終点はlineTo()メソッドで入力します。
具体的には

moveTo(始点のx座標, 始点のy座標);
lineTo(終点のx座標, 終点のy座標);
と連続して記述します。
次に

x,y座標軸方向はcanvasの左上末端が原点となって以下の矢印の方向が正の向きとなります。


　　　→x方向(width)
  　┌─────
↓ │
 y  │
方 │ canvas
向 │


function draw(){
    var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
    canvas.width = 320;
    canvas.height = 320;
    ctx.beginPath();
    //始点
    ctx.moveTo(60, 0);
    //終点
    ctx.lineTo(60, 100);
    ctx.stroke();
}


window.onlad = draw();

実行結果http://jsfiddle.net/sirok/Z8yCL/

直線ができましたね。
linTo()を連続して描画すると折れ線が表現できます。

function draw(){
    var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
    canvas.width = 320;
    canvas.height = 320;
    ctx.beginPath();
    //始点
    ctx.moveTo(60, 0);
    //終点
    ctx.lineTo(60, 100);
    ctx.lineTo(200, 100);
    ctx.stroke();
}

window.onlad = draw();

実行結果http://jsfiddle.net/sirok/Z8yCL/1/

さらに、図形が一筆で閉じることができれば、そのパスを自動的に設定してくれるメソッドclosePath()があります。パスを設定するだけなので、これは必ずstrokeの前に置かなくてはなりません。

function draw(){
    var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
    canvas.width = 320;
    canvas.height = 320;
    ctx.beginPath();
    //始点
    ctx.moveTo(60, 0);
    //終点
    ctx.lineTo(60, 100);
    ctx.lineTo(200, 100);
    ctx.closePath();
    ctx.stroke();
}

window.onlad = draw();


実行結果http://jsfiddle.net/sirok/Z8yCL/3/

線の太さや色もつけることができます。
例えば赤色でフォントの厚みは15pxにして見ます。

線の色づけはstrokeStyleで設定します。'rgb(a,b,c)'か'red'などと直接色名を指定します。引数のa,b,cの使用ははcssの文字の色づけなどと同じで、赤rの濃度、緑gの濃度、青bの濃度を組み合わせて任意の色が作れます。デフォルトでは'rgb(255, 255, 255)'つまり、白です。
赤ならr =255だけなのでctx.strokeStyle = 'rgb(255, 0 ,0)';と書きます。
rgbで設定する場合、第4の引数を代入することができます。これはアルファといって色の濃度となり、0～1までの値が入ります。おそらく一定の区画に対象の色があって、そのうちのアルファの値は透明にすることで、濃度が表現されていると思われます。アルファを代入する場合はaを追加して'rgba()'とします。以下ではアルファを0.1とするとピンクに見えますね。透明は見えませんが、canvasの背景はデフォルトで白なので透明な部位は白く見えます。


太さはlineWidthで設定します。
ctx.lineWidth = 15;

function draw(){
    var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
    canvas.width = 320;
    canvas.height = 320;
   
    ctx.strokeStyle = "rgba(255, 0, 0, 0.1)";
    ctx.lineWidth = 15;
    ctx.beginPath();
    //始点
    ctx.moveTo(60, 0);
    //終点
    ctx.lineTo(60, 100);
    ctx.lineTo(200, 100);
    ctx.closePath();
    ctx.stroke();
}

window.onlad = draw();

実行結果http://jsfiddle.net/sirok/Z8yCL/13/