HTML 캔버스 addColorStop() 메서드
예시
사각형의 채우기 스타일로 검은색에서 흰색으로 가는 그라디언트를 정의합니다.
자바스크립트:
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| addColorStop() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
addColorStop() 메서드는 그래디언트 객체의 색상과 위치를 지정합니다.
addColorStop() 메서드는 createLinearGradient() 또는 createRadialGradient() 와 함께 사용됩니다 .
참고: addColorStop() 메서드를 여러 번 호출하여 그라데이션을 변경할 수 있습니다. 그라디언트 개체에 대해 이 방법을 생략하면 그라디언트가 표시되지 않습니다. 그라디언트를 표시하려면 최소한 하나의 색상 정지점을 만들어야 합니다.
| 자바스크립트 구문: | 그래디언트 .addColorStop( 중지 , 색상 ); |
|---|
매개변수 값
| Parameter | Description | Play it |
|---|---|---|
| stop | A value between 0.0 and 1.0 that represents the position between start and end in a gradient | |
| color | A CSS color value to display at the stop position |
더 많은 예
예시
여러 addColorStop() 메서드로 그래디언트를 정의합니다.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop("0.3", "magenta");
grd.addColorStop("0.5", "blue");
grd.addColorStop("0.6", "green");
grd.addColorStop("0.8", "yellow");
grd.addColorStop(1, "red");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);