19/09/2018, 14:55
createPattern() trong Canvas
Sử dụng ảnh để đổ vào hình vẽ 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 27 28 29 30 31 32 < ...
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/hoe1537343007.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
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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| createPattern() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức createPattern() sử dụng để lặp một thẻ theo chiều quy định.
Thẻ có thể là ảnh, video hoặc <canvas>.
Nội dung được tạo bởi createPattern() có thể được sử dụng để vẽ/đổ lên hình chữ nhật, hình tròn, đường thẳng v.v…
Cú pháp JavaScript: context.createPattern(image,”repeat|repeat-x|repeat-y|no-repeat”);
Giá trị tham số
| Tham số | Miêu tả |
|---|---|
| image | Ảnh, canvas hoặc video để sử dụng mẫu họa tiết |
| repeat | Mặc định. Lặp mẫu họa tiết cả chiều ngang và chiều dọc |
| repeat-x | Lặp mẫu họa tiết theo chiều ngang |
| repeat-y | Lặp mẫu họa tiết theo chiều dọc |
| no-repeat | Mẫu họa tiết chỉ hiển thị một lần (không lặp lại) |
