Canvas で遊んでみる。

おもしろい。


で, CanvasRenderingContext2D を拡張してみる。

CanvasRenderingContext2D.prototype.strokeLine = function(path, closePath) { 
    var begin = path.shift(); 
    this.beginPath(); 
    this.moveTo(begin[0], begin[1]); 
    for(var i=0;i<path.length;i++) { 
        this.lineTo(path[i][0], path[i][1]); 
    } 
    if(closePath) this.closePath(); 
    this.stroke(); 
} 

配列を引数にとり,下記のように使う。

canvas.storokeLine([
  [10, 0],
  [10, 20],
  [30, 20],
])

(10, 0) からはじまり (10,20) で折れ曲がり (30, 20) で終わる線がひける。
ちょい改造。 第2引数でパスを閉じるかどうか指定できるようにした。


他の拡張も考え中。
新しいスタイル(色とか線の太さとか)を設定するためにはオブジェクトを渡して for in で反映させればいいか。

CanvasRenderingContext2D.prototype.setStyle = function(o) {
    for(var i in o) {
        this[i] = o[i];
    }
}
canvas.setStyle({
    lineWidth : 10,
    globalAlpha : 0.5,
    lineJoin : "round",
    lineCap : 'squqre',
    strokeStyle : 'red'
});

こんな風に使う。