이 메서드는 인수로 표시되는 좌표로 지정된 선을 따라 그리는 선형 그래디언트를 나타내는 CanvasGradient 개체를 반환합니다. 4개의 인수는 그래디언트의 시작점(x1,y1)과 끝점(x2,y2)을 나타냅니다.
createLinearGradient(x0, y0, x1, y1)
다음은 createLinearGradient() 메서드의 매개변수 값입니다. -
| S.No | 매개변수 및 설명 |
|---|---|
| 1 | x0 x-좌표- 그래디언트의 시작점 |
| 2 | y0 y-좌표 - 그래디언트의 시작점 |
| 3 | x1 x-좌표 - 그라디언트의 끝점 |
| 4 | y1 y-좌표 - 그라디언트의 끝점 |
예시
HTML5에서 선형 그래디언트를 그리는 방법을 배우기 위해 다음 코드를 실행할 수 있습니다 -
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Linear Gradient</title>
</head>
<body>
<canvas id="newCanvas" width="450" height="250" style="border:1px
solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctxt = c.getContext("2d");
var linegrd = ctxt.createLinearGradient(0, 0, 170, 0);
linegrd.addColorStop(0.5, "#E44D26");
linegrd.addColorStop(1, "#66CC00");
ctxt.fillStyle = linegrd;
ctxt.fillRect(50, 80, 300, 100);
</script>
</body>
</html>