Để xoay một hình ảnh quanh tâm của cạnh đáy (bottom center) trên Canvas, bạn cần thực hiện 3 bước: dịch chuyển gốc tọa độ (translate), xoay (rotate), sau đó vẽ ảnh (drawImage) với tọa độ âm để căn giữa.
Các bước thực hiện
- Dịch chuyển gốc tọa độ đến tâm đáy của ảnh (giả sử ảnh rộng 64px, cao 120px):
context.translate(32, 120);
- Xoay canvas góc mong muốn (ví dụ 90 độ):
context.rotate(90 * Math.PI / 180);
- Vẽ ảnh với tọa độ âm để tâm đáy khớp với gốc tọa độ mới:
context.drawImage(img, -32, -120, 64, 120);
Giải thích
translate(32, 120)di chuyển gốc (0,0) đến điểm (32,120) — tức là tâm cạnh đáy của ảnh.rotate()xoay toàn bộ hệ tọa độ canvas quanh gốc mới.drawImage(img, -32, -120, 64, 120)vẽ ảnh sao cho tâm đáy của nó trùng với gốc tọa độ (0,0) sau khi đã translate.
Kỹ thuật này áp dụng cho mọi góc xoay và mọi điểm neo (anchor point) khác nhau bằng cách điều chỉnh tham số translate và tọa độ drawImage.