Phương thức này trả về một đối tượng CanvasGradient đại diện cho một gradient tuyến tính vẽ dọc theo đường được cung cấp bởi các tọa độ được đại diện bởi các đối số. Bốn đối số đại diện cho điểm bắt đầu (x1, y1) và điểm cuối (x2, y2) của gradient.
createLinearGradient(x0, y0, x1, y1)
Đây là các giá trị tham số của phương thức createLinearGradient () -
| S.Không | Thông số &Mô tả |
|---|---|
| 1 | x0 x-toạ độ- Điểm bắt đầu của gradient |
| 2 | y0 y- tọa độ - Điểm bắt đầu của gradient |
| 3 | x1 tọa độ x - Điểm kết thúc của gradient |
| 4 | y1 y- tọa độ - Điểm kết thúc của gradient |
Ví dụ
Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách vẽ gradient tuyến tính trong 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>