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' });
こんな風に使う。