캔버스 - 그라디언트
구배 캔버스 모양은 단색에 한정되지 않는다 등의 사각형, 원, 선, 텍스트를 기입하기 위해 사용될 수있다.
그라디언트의 두 가지 종류가 있습니다 :
- createLinearGradient은 ( x,y,x1,y1 ) - 선형 구배를 만들어
- createRadialGradient는 ( x,y,r,x1,y1,r1 ) - 방사형 / 원형 그라데이션을 만듭니다
우리가 그라데이션 개체가되면, 우리는 두 가지 이상의 색상 정지 점을 추가해야합니다.
addColorStop() 메소드는 색상 정지를 지정하고 그라데이션을 따라 위치. 그라데이션 위치는 어디 1-0 사이가 될 수 있습니다.
구배를 사용하여, 도형 그리기이어서, 구배로 fillStyle에서는 strokeStyle 또는 속성을 설정 (rectangle, text, or a line) .
사용 createLinearGradient()
예
선형 그라데이션을 만듭니다. 그라데이션으로 사각형을 입력 :
자바 스크립트 :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); »그것을 자신을 시도 사용 createRadialGradient() :
예
방사형 / 원형 그라데이션을 만듭니다. 그라데이션으로 사각형을 입력 :
자바 스크립트 :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); »그것을 자신을 시도