サイト内検索

lineJoin プロパティ

実行結果

コード

/* 線の幅を定義 */
ctx.lineWidth = 15;
/* roundの例 */
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(10, 90);
ctx.lineTo(25, 40);
ctx.lineTo(40, 90);
ctx.stroke();
/* bevelの例 */
ctx.beginPath();
ctx.lineJoin = "bevel";
ctx.moveTo(60, 90);
ctx.lineTo(75, 40);
ctx.lineTo(90, 90);
ctx.stroke();
/* miierの例 */
ctx.beginPath();
ctx.lineJoin = "miter";
ctx.moveTo(110, 90);
ctx.lineTo(125, 40);
ctx.lineTo(140, 90);
ctx.stroke();
/* 補助線 */
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.moveTo(10, 40);
ctx.lineTo(140, 40);
ctx.stroke();