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”と同じ座標の渡し方をします。
線の幅を変えると内側に延びるのか、外側に広がるのか、確認してみましょう。