HTML 캔버스의 strokeStyle 속성은 획의 색상, 그라디언트 또는 패턴을 설정하는 데 사용됩니다.
다음은 구문입니다 -
context.strokeStyle=color|gradient|pattern;
위의 값에는 -
가 포함됩니다.- 색상 − 그림의 획 색상입니다.
- 그라데이션 − 그라디언트 획을 만드는 선형 또는 방사형 그라디언트 개체
- 패턴 − 패턴 획을 만들기 위한 패턴 개체입니다.
이제 캔버스의 strokeStyle 속성을 구현하는 예를 살펴보겠습니다 -
예시
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="550" height="400" style="border −2px solid orange;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctx = c.getContext("2d");
var grad = ctx.createLinearGradient(150, 0, 280, 0);
grad.addColorStop("0", "orange");
grad.addColorStop("0.5", "blue");
grad.addColorStop("1.0", "green");
ctx.strokeStyle = grad;
ctx.lineWidth = 20;
ctx.strokeRect(150, 120, 240, 100);
</script>
</body>
</html> 출력
