Phương thức này trả về đối tượng CanvasGradient đại diện cho gradient tuyến tính tô màu theo đường thẳng do tọa độ tham số xác định. Bốn tham số đại diện cho điểm bắt đầu (x1,y1) và điểm kết thúc (x2,y2) của gradient.
createLinearGradient(x0, y0, x1, y1)
Các tham số của createLinearGradient():
| STT | Tham số & Mô tả |
|---|---|
| 1 | x0 - Tọa độ x - Điểm bắt đầu gradient |
| 2 | y0 - Tọa độ y - Điểm bắt đầu gradient |
| 3 | x1 - Tọa độ x - Điểm kết thúc gradient |
| 4 | y1 - Tọa độ y - Điểm kết thúc gradient |
Ví dụ
Chạy mã sau để học 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>