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);
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);
»시도
브라우저 지원
인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬과 사파리 지원 addColorStop () 메소드.
참고 : 인터넷 익스플로러 8 이전 버전의 <캔버스> 요소를 지원하지 않습니다.
정의 및 사용
addColorStop () 메서드는 그라데이션 객체의 색상과 위치를 지정합니다.
addColorStop () 메서드 createLinearGradient () 또는 createRadialGradient ()을 함께 사용.
참고 : 그라데이션을 변경하는 방법 addColorStop ()를 여러 번 호출 할 수 있습니다.이 방법을 사용하여 그래디언트 오브젝트가 아닌 경우, 구배는 볼 수 없다. 가시 구배를 얻기 위해서는, 적어도 하나의 색을 만들 필요가있다.
| 자바 스크립트 구문 : | 그라데이션.addColorStop (중지, 컬러); |
|---|
매개 변수 값
| 参数 | 描述 |
|---|---|
| stop | 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。 |
| color | 在stop位置显示的 CSS 颜色值 。 |
더 많은 예제
예
이것은 그라데이션 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);
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);
»시도
HTML 캔버스 참조 설명서