JavaScript»キャンバス»lineToで線をひく パスをつかって線をかいてみる

ファイル名: js-canvas/quest_00061.html

下のソースコードをうつして、キャンバスに図のような線をかいてみましょう。

ソースコード

const canvas = document.getElementById("line");
const context = canvas.getContext("2d");

context.lineWidth = 3;
context.strokeStyle = "rgb(255, 165, 0)";

context.beginPath();
context.moveTo(50, 100);
context.lineTo(270, 220);
context.stroke();

解説

beginPathで新しく線をかく宣言せんげんをします。 moveToがはじめの位置を、lineToがおわりの位置をきめています。