イナヅマTVログ

Canvas始めました – 線を描いた

| 0件のコメント

線(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
線端とジョイントを変えて2種類線を描いてみた。

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();

コメントを残す

必須欄は * がついています