JavaScript»キャンバス»四角のわく線を描くstrokeRect 四角のわく線をかいてみる

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

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

ソースコード

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

context.lineWidth = 3;
context.strokeStyle = "rgb(255, 0, 0)";
context.strokeRect(40, 80, 240, 50);

解説

context.lineWidth = 3;

この部分で線(line)の幅(width)を決めています。”width”はこれからも良く出てくるので是非意味を覚えましょう。

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

線を引く(stroke)色(style)を決めています。前回の”fillStyle”とほぼ同じですが、目標が違います。
しっかりと使い分けるようにしましょう。

context.strokeRect(40, 80, 240, 50);

最後に長方形(rect)の形に線を引きます(stroke)。長方形の形なので”fillRect”と同じ座標の渡し方をします。

線の幅を変えると内側に延びるのか、外側に広がるのか、確認してみましょう。