Phương thức Canvas translate()
Định nghĩa và cách sử dụng
translate() để lại lại vị trí (0,0) trên canvas.
Ghi chú:Khi bạn gọi các phương pháp như fillRect() giá trị sẽ được thêm vào x và các phương pháp khác y giá trị tọa độ.
Mô hình
Vẽ một hình vuông tại vị trí (10,10), đặt vị trí mới (0,0) là (70,70). Vẽ lại hình vuông mới (lưu ý rằng hình vuông hiện tại 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);
Ngữ 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 độ thẳng đứ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ợ yếu tố <canvas>.
