19/09/2018, 15:01

translate() trong Canvas

Vẽ một hình chữ nhật tại vị trí (10,10), di chuyển vị trí gốc (0,0) sang tọa độ (70,70). Vẽ lại hình chữ nhật lần nữa (lưu ý là vị trí hình chữ nhật lúc này là (80,80): Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 ...

Vẽ một hình chữ nhật tại vị trí (10,10), di chuyển vị trí gốc (0,0) sang tọa độ (70,70). Vẽ lại hình chữ nhật lần nữa (lưu ý là vị trí hình chữ nhật lúc này là (80,80):

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

Code:

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 Icon Chrome Icon FireFox Icon IE Icon Safari Icon Opera
translate() 4.0 2.0 9.0 3.1 9.0

Định nghĩa và cách sử dụng

Phương thức translate() sử dụng để dịch chuyển tọa độ (0,0) sang một vị trí mới trong canvas.

Lưu ý: Khi bạn gọi một phương thức như fillRect() sau translate(), tọa độ cũng tự động thay đổi theo vị trí mới.

img_translate

Cú pháp JavaScript: context.translate(x,y);

Giá trị tham số

Lưu ý: Bạn có thể dùng 1 hoặc cả 2 tọa độ.

Tham sốMiêu tả
xGiá trị thêm vào theo chiều ngang (Tọa độ X)
yGiá trị thêm vào theo chiều dọc (Tọa độ Y)
0