線(Path)を描くの巻。
HTML
<canvas id='canvas'></canvas> |
JavaScript
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.lineWidth = 10; context.lineCap = 'butt'; context.beginPath(); context.moveTo(50,30); context.lineTo(200,30); context.stroke(); context.closePath(); |
beginPath
から
closePath
の間に記述。
moveToで起点に移動してlineToで線を指定。
strokeで描く。
moveTo
x position:int, y position:int
lineTo
x position:int, y position:int
線端形状
lineCap(property):String
butt, square, round
added 2012-04-19
線端とジョイントを変えて２種類線を描いてみた。
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.lineWidth = 10; context.lineCap = 'round'; context.lineJoin = 'bevel';//miter, round context.beginPath(); context.moveTo(50,30); context.lineTo(100,30); context.lineTo(100,60); context.stroke(); context.closePath(); // context.lineCap = 'butt'; context.lineJoin = 'round';//miter, round context.beginPath(); context.moveTo(50,130); context.lineTo(100,130); context.lineTo(100,160); context.stroke(); context.closePath(); |