English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML 캔버스의 strokeStyle 속성은 표시선의 색상, 진단 또는 패턴을 설정하는 데 사용됩니다. <canvas> 요소는 JavaScript를 사용하여 웹 페이지에서 그래픽을 그릴 수 있게 합니다. 각 캔버스는 높이와 너비를 설명하는 두 개의 요소를 가지고 있습니다.
빨간 표시선 색상을 사용하여 다각형을 그리기:
HTML canvas strokeStyle 속성을 사용하여 온라인으로 사용 예제:
<!DOCTYPE html>
<html>
<head>
<title>HTML canvas strokeStyle 속성의 사용(기본 튜토리얼 웹 oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
귀하의 브라우저는 HTML을 지원하지 않습니다5 canvas 태그。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
</script>
</body>
</html>테스트를 보세요 ‹/›IEFirefoxOperaChromeSafari
Internet Explorer 9Firefox, Opera, Chrome 및 Safari가 strokeStyle 속성을 지원합니다.
주의:Internet Explorer 8 이전 버전은 <canvas> 요소를 지원하지 않습니다。
strokeStyle 속성은 표시선의 색상, 진단 또는 패턴을 설정하거나 반환합니다。
| 기본 값： | #000000 |
|---|---|
| JavaScript 문법： | context.strokeStyle=color|gradient|pattern; |
| 값 | 설명 |
|---|---|
| color | 그리기 표시선 색상을 지시하는 CSS 색상 값。기본 값은 #000000입니다。 |
| gradient | 填充绘图的渐变对象（선형 또는 放射性）。 |
| pattern | pattern 표시선을 생성하기 위한 pattern 객체. |
다각형을 그리기. 진단 표시선을 사용하십시오:
HTML canvas strokeStyle 속성을 사용하여 온라인으로 사용 예제:
<!DOCTYPE html>
<html>
<head>
<title>HTML canvas strokeStyle 속성의 사용(기본 튜토리얼 웹 oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
귀하의 브라우저는 HTML을 지원하지 않습니다5 canvas 태그。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
//변화填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
</script>
</body>
</html>테스트를 보세요 ‹/›문자 "Big smile!"을 진단 표시선으로 쓰기:
HTML canvas strokeStyle 속성을 사용하여 온라인으로 사용 예제:
<!DOCTYPE html>
<html>
<head>
<title>HTML canvas strokeStyle 속성의 사용(기본 튜토리얼 웹 oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
귀하의 브라우저는 HTML을 지원하지 않습니다5 canvas 태그
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// 渐变填充
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 변화填充
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
</script>
</body>
</html>테스트를 보세요 ‹/›