19/09/2018, 14:54
fillStyle trong Canvas
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 < ! DOCTYPE html > < html > < body > < canvas id = ...
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 |
<!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"); ctx.fillStyle = "#FF0000"; 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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| fillStyle | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Thuộc tính fillStyle dùng để thiết lập hoặc trả về màu, dài màu hoặc mẫu họa tiết để đổ lên hình.
Giá trị mặc định : #000000
Cú pháp JavaScript: context.fillStyle=color|gradient|pattern;
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| color | Giá trị màu được đổ lên hình vẽ. Giá trị mặc định là #000000 (màu đen) |
| gradient | Dải màu (dạng thẳng hoặc dạng tròn) sử dụng để đổ lên hình |
| pattern | Mẫu họa tiết sử dụng để đổ lên hình |
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 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
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
Sử dụng ảnh để đổ vào hình vẽ
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 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <body> <p>Ảnh sử dụng:</p> <img src="/pictures/picfullsizes/2018/09/19/sfh1537342977.png" id="lamp" awidth="57" height="57"> <p>Canvas:</p> <button onclick="draw('repeat')">Lặp</button> <button onclick="draw('repeat-x')">Lặp ngang</button> <button onclick="draw('repeat-y')">Lặp dọc</button> <button onclick="draw('no-repeat')">Không lặp</button> <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> function draw(direction) { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.clearRect(0, 0, c.awidth, c.height); var img = document.getElementById("lamp") var pat = ctx.createPattern(img, direction); ctx.rect(0, 0, 150, 100); ctx.fillStyle = pat; ctx.fill(); } </script> </body> </html> |
Demo
