Hyper Text Markup Language 5

線のスタイル

ここでは線と線が交差するときのスタイルを指定するlineJoinプロパティ、そして線の太さを指定するlineWidthプロパティを紹介します。

まずlineJoinプロパティですが、これは"miter", "round", "bevel"の３つの中から指定します。miterは初期値で、先が尖っている形です。roundは先が丸まった形です。"bevel"は先が無く、切り取られたような形となっています。

次にlineWidthプロパティですが、これは単純に線の太さを指定するものです。初期値は1.0となっており、大きくなるにつれて線も太くなります。

// 交差した時のスタイル。 miter, round, bevelの３つから指定
// 初期値は"miter"
	lineJoin = "miter";

// 線の太さの指定
// 初期値は1.0
	lineWidth = 1.0;

サンプル

サンプルではlineJoinプロパティを分かりやすくするために、それぞれの線をlineWidthプロパティで太くしています。左上はlineJoinが"miter"の場合です。それ以前にlineJoinが指定されていなければ、初期値は"miter"なので、特に指定する必要はありません。右上と中央はそれぞれ、"round"と"bevel"の場合を表わしています。

一番下の例では、色と太さを変えてみました。キャンバスではこのように、太くても滑らかな線を描くことが可能です。

// "miter"の場合（左上）
	cx.beginPath();
	cx.lineJoin = "miter";
	cx.lineWidth = 10;
	cx.moveTo(40, 40);
	cx.lineTo(80, 100);
	cx.lineTo(120, 40);
	cx.stroke();

// "round"の場合（右上）
	cx.beginPath();
	cx.lineJoin = "round";
	cx.lineWidth = 10;
	cx.moveTo(170, 40);
	cx.lineTo(210, 100);
	cx.lineTo(250, 40);
	cx.stroke();

// "bevel"の場合（中央）
	cx.beginPath();
	cx.lineJoin = "bevel";
	cx.lineWidth = 10;
	cx.moveTo(105, 120);
	cx.lineTo(145, 180);
	cx.lineTo(185, 120);
	cx.stroke();

// 線の太さ、色、長さを変更
	cx.beginPath();
	cx.lineJoin = "round";
	cx.lineWidth = 20;
	cx.moveTo(50, 200);
	cx.lineTo(90, 260);
	cx.lineTo(130, 200);
	cx.lineTo(170, 260);
	cx.lineTo(210, 200);
	cx.lineTo(250, 260);
	cx.strokeStyle = "rgb(100, 100, 256)";
	cx.stroke();