Khóa học đề xuất:
Phương pháp HTML canvas translate()
Định nghĩa và cách sử dụng translate()
Ghi chú:phương pháp để lại lại vị trí (0,0) trên canvas. Khi bạn gọi các phương pháp như fillRect() x và các phương pháp như vậy, giá trị sẽ được thêm vào y giá trị tọa độ.
Mô hình
Vẽ một hình vuông tại vị trí (10,10), thiết lập vị trí mới (0,0) thành (70,70). Vẽ hình vuông mới (lưu ý rằng hiện tại hình vuông bắt đầu từ vị trí (80,80)):
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
Cú pháp
context.translate(x,y);
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| x | Giá trị thêm vào tọa độ ngang (x). |
| y | Giá trị thêm vào tọa độ vuông (y). |
Hỗ trợ trình duyệt
Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Ghi chú:Trình duyệt Internet Explorer 8 và các phiên bản trước không hỗ trợ phần tử <canvas>.
