19/09/2018, 14:52
createLinearGradient() trong Canvas
Tạo dải màu từ trái qua phải Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 < ! DOCTYPE html > < html > < ...
Tạo dải màu từ trái qua phải
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var my_gradient = ctx.createLinearGradient(0, 0, 170, 0); my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(1, "white"); ctx.fillStyle = my_gradient; ctx.fillRect(20, 20, 150, 100); </script> </body> </html> |
Demo
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| createLinearGradient() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức createLinearGradient() dùng để tạo một đối tượng dải màu dạng đường thẳng.
Dải màu này có thể dùng để đổ lên hình chữ nhật, hình tròn, đường thẳng, chữ, v.v…
Mẹo: Có thể sử dụng đối tượng này làm giá trị cho thuộc tính strokeStyle hoặc fillStyle.
Mẹo: Sử dụng phương thức addColorStop() để thêm màu sắc và vị trí của màu trong dải màu.
Cú pháp JavaScript: context.createLinearGradient(x0,y0,x1,y1);
Giá trị thuộc tính
| Tham số | Miêu tả |
|---|---|
| x0 | Tọa độ X của điểm bắt đầu dải màu |
| y0 | Tọa độ Y của điểm bắt đầu dải màu |
| x1 | Tọa độ X của điểm kết thúc dải màu |
| y1 | Tọa độ Y của điểm kết thúc dải màu |
Ví dụ
Tạo dải màu từ trên xuống dưới
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var my_gradient = ctx.createLinearGradient(0, 0, 0, 170); my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(1, "white"); ctx.fillStyle = my_gradient; ctx.fillRect(20, 20, 150, 100); </script> </body> </html> |
Demo
Tạo dải màu chuyển từ đen, sang đỏ, sang trắng
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var grd = ctx.createLinearGradient(0, 0, 170, 0); grd.addColorStop(0, "black"); grd.addColorStop(0.5, "red"); grd.addColorStop(1, "white"); ctx.fillStyle = grd; ctx.fillRect(20, 20, 150, 100); </script> </body> </html> |
Demo
