「JavaScript」strokeStyleで図形の輪郭色を変更する

2021年8月17日

書式
ctx.strokeStyle = color;
ctx.strokeStyle = gradient;
ctx.strokeStyle = pattern;
gradient:線形または放射状のグラデーション
pattern:繰り返し画像
使用例
htmlコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<canvas id="cs"></canvas>
<canvas id="cs"></canvas>
<canvas id="cs"></canvas>

javascriptコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var tt = document.getElementById('cs');
var ctx = tt.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(10, 10, 100, 100);
var tt = document.getElementById('cs'); var ctx = tt.getContext('2d'); ctx.strokeStyle = 'red'; ctx.strokeRect(10, 10, 100, 100);
var tt = document.getElementById('cs');
var ctx = tt.getContext('2d');

ctx.strokeStyle = 'red';
ctx.strokeRect(10, 10, 100, 100);

 

JavaScript

Posted by arkgame