サイト内検索

lineCap プロパティ

実行結果

コード

/* 線の幅を定義 */
ctx.lineWidth = 20;
/* buttの例 */
ctx.beginPath();
ctx.lineCap = "butt";
ctx.moveTo(25, 20);
ctx.lineTo(25, 80);
ctx.stroke();
/* roundの例 */
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(50, 20);
ctx.lineTo(50, 80);
ctx.stroke();
/* squareの例 */
ctx.beginPath();
ctx.lineCap = "square";
ctx.moveTo(75, 20);
ctx.lineTo(75, 80);
ctx.stroke();
/* 補助線1 */
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.moveTo(10, 20);
ctx.lineTo(90, 20);
ctx.stroke();
/* 補助線2 */
ctx.beginPath();
ctx.moveTo(10, 80);
ctx.lineTo(90, 80);
ctx.stroke();