19/09/2018, 14:54
addColorStop() 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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| addColorStop() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức addColorStop() quy định màu sắc và vị trí của màu trong dải màu.
Phương thức addColorStop() được sử dụng cùng với createLinearGradient() hoặc createRadialGradient().
Lưu ý: Bạn có thể gọi phương thức addColorStop() nhiều lần để thay đổi màu sắc trong dải màu. Nếu bạn thiếu phương thức này, dài màu sẽ không hiển thị. Bạn cần tạo ít nhất một phương thức addColorStop() để hiển thị dải màu.
Cú pháp JavaScript: gradient.addColorStop(stop,color);
Giá trị tham số
| Tham số | Miêu tả |
|---|---|
| stop | Có giá trị từ 0.0 đến 1.0 thể hiển vị trí của màu trong dải màu |
| color | Giá trị màu sẽ hiển thị tại ví trí được chỉ định trong tham số stop |
Ví dụ
Tạo dải nhiều màu khác nhau với phương thức addColorStop()
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 22 23 24 25 26 |
<!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.3", "magenta"); grd.addColorStop("0.5", "blue"); grd.addColorStop("0.6", "green"); grd.addColorStop("0.8", "yellow"); grd.addColorStop(1, "red"); ctx.fillStyle = grd; ctx.fillRect(20, 20, 150, 100); </script> </body> </html> |
Demo
