Canvas createLinearGradient() 메서드
정의와 사용법
createLinearGradient() 方法创建线性的渐变对象。
渐变可用于填充矩形、圆形、线条、文本等等。
提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
提示：请使用 addColorStop() 该方法指定不同的颜色以及在 gradient 객체에서의 위치。
实例
另请参阅：
왼쪽에서 오른쪽으로 흰색에서 검은색으로 이어지는 그레이더를 정의하여 사각형의 채우기 스타일로 사용합니다：
JavaScript:
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);
문법
context.createLinearGradient(x0,y0,x1,y1);
매개변수 값
| 매개변수 | 설명 |
|---|---|
| x0 | 그레이더의 시작점의 x 좌표。 |
| y0 | 그레이더의 시작점의 y 좌표。 |
| x1 | 그레이더의 끝점의 x 좌표。 |
| y1 | 그레이더의 끝점의 y 좌표。 |
更多实例
예제 2
사각형의 채우기 스타일로 사용할 수 있는 상단에서 하단으로 이어지는 그레이더를 정의합니다：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
예제 3
빨강에서 흰색으로 이어지는 그레이더를 정의하여 사각형의 채우기 스타일로 사용합니다：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
브라우저 지원
표에서의 숫자는 이 특성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
주의사항:Internet Explorer 8 이상 버전은 <canvas> 요소를 지원하지 않습니다.
