HTML5 addColorStop() 메소드 오프셋 매개 변수 이해하기

HTML5 Canvas Gradient를 배우고 있습니다. createLinearGradient(x,y,x1,y1)은 (x, y)부터 (x1, y1)까지 시작하는 선형 그래디언트를 생성한다는 것을 알았습니다. 그러나 what I have read에서부터 색상 정지와 그라데이션을 따라 위치를 지정하는 addColorStop()이 있습니다. 따라서이 방법은 두 가지 매개 변수를 사용합니다. 색상은 직설적이며 이해할 만하지만 다른 매개 변수 인 그라데이션 위치는 0에서 1 사이의 값을가집니다. 이해할 수없는 부분입니다. 0은 무엇을 지정합니까? 1은 무엇을 지정합니까? 웹에서 검색했지만 이해할 수있는 항목을 찾을 수 없습니다.HTML5 addColorStop() 메소드 오프셋 매개 변수 이해하기

출처

2017-12-19 azemda

나는

그라데이션 다른 색상으로 하나의 색상에서 부드러운 변화입니다 답변을하려고합니다.

그라디언트를 만들 때 추가 할 시작점, 끝점 및 색을 지정합니다.

아래 예제에서는 (0,0)에서 (170,0)까지 선형 그래디언트 시작을 만드는 것으로 가정합니다.

다음에 grad.addColorStop(0,'#0000FF')이 시작되며 다음 문장이 grad.addColorStop(.2,'#00FF00') 인 경우 시작됩니다. 첫 번째 색상은 그라데이션 폭의 0.2 %에서 끝나고 (0.2 % of 170) 다음 색상은 그라데이션 폭의 0.2 %부터 시작합니다.

addColorStop라고 말하면 명시 적으로 이전 색상의 포인트를 중지한다고 말합니다.

확인이 example 그라데이션은 동일하지만 모양 위치에 따라 색상이 다릅니다.

// Create Gradient 
var grad=context.createLinearGradient(0,0,170,0); 

// Start at 0 end at 0.2 
grad.addColorStop(0,'#0000FF'); 

// Start at 0.2 end at 0.4 
grad.addColorStop(.2,'#00FF00'); 

// Start at 0.4 end at 0.6 
grad.addColorStop(.4,'#FFFF00'); 

// Start at 0.6 end at 0.8 
grad.addColorStop(.6,'#FF8800'); 

// Start at 0.8 end at 0.9 
grad.addColorStop(.8,'#FF0000'); 

//Start at 0.9 to rest all till end 
grad.addColorStop(0.9,'white');

var canvas = document.getElementById("canvas"); 
 
var context = canvas.getContext("2d"); 
 

 
var grad=context.createLinearGradient(0,0,170,0); 
 

 
grad.addColorStop(0,'#0000FF'); 
 

 
grad.addColorStop(.2,'#00FF00'); 
 

 
grad.addColorStop(.4,'#FFFF00'); 
 

 
grad.addColorStop(.6,'#FF8800'); 
 

 
grad.addColorStop(.8,'#FF0000'); 
 

 
grad.addColorStop(0.9,'white'); 
 

 
grad.addColorStop(1,'blue'); 
 

 
context.fillStyle = grad; 
 

 

 
context.fillRect(0,0,170,100); 
 
context.strokeRect(0,0,170,100) 
 

 
context.fillRect(80,200,300,100); 
 
context.strokeRect(80,200,300,100)

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <canvas id="canvas" width="500" height="500"></canvas> 
 
    
 
</body> 
 
</html>

grad.addColorStop (에서

출처

2017-12-19 09:00:10 Sumeet

), 첫 번째 매개 변수는 무엇을 의미합니까? 0과 1 사이의 숫자는 무엇을 의미합니까?, 나는 그 부분을 얻지 못합니다. – azemda

그라디언트에서 선택하려는 부분을 지정합니다. Like 0, 0.2,0.5라고하면, 그라데이션의 0 ~ 0.2 %, 그라디언트의 0.2 ~ 0.3 %와 같이 계산됩니다. 그라디언트의 폭이 100이면 그라디언트의 색상이 무엇이든간에 0-20이라고 가정합니다. – Sumeet

HTML5 addColorStop() 메소드 오프셋 매개 변수 이해하기

답변

관련 문제