Canvas strokeStyle 속성
정의와 사용법
strokeStyle 속성 값이나 반환 값은 펜터치의 색상, 渐变色 또는 패턴입니다.
예제
예제 1
사각형을 그립니다. 파란색 펜터치 색상을 사용하세요:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);
문법
context.strokeStyle=color|gradient|pattern;
속성 값
| 값 | 설명 |
|---|---|
| color | 그리기 펜터치 색상을 지시하는 CSS 색상 값）。기본 값은 #000000입니다. |
| gradient | 그리기에 사용되는 渐变色 객체（선형또는방사성）。 |
| pattern | pattern 펜터치를 생성하는 pattern 객체. |
기술 세부 사항
| 기본 값: | #000000 |
|---|
더 많은 예제
예제 2
사각형을 그립니다. 渐变色로:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 渐变色填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
예제 3
텍스트 "codew3c.com"을 渐变色로 쓰기:
JavaScript:
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","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 渐变色填充
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
브라우저 지원
표의 숫자는 이 특성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.
