Đặt canvas gốc ở góc dưới bên trái

Question

Xin chào các bạn có cách nào để đặt nguồn gốc ở phía dưới bên trái của canvas không? Tôi đã thử mở rộng bằng − 1 nhưng sau đó mọi thứ đều lộn ngược. Tôi cần phải làm một cái gì đó giống như một hệ thống phối hợp nhưng chỉ với phần tích cực (góc phần tư đầu tiên). Vì vậy, tôi cần nó để bắt đầu với 0,0 ở góc dưới bên trái.

Answer 1

ctx.translate(0, canvas.height); 
ctx.scale(1, -1); 

See a demo on JSFiddle.

Answer 2

là có một cách để thiết lập nguồn gốc để dưới bên trái của vải?

Không hoàn toàn theo cách bạn muốn, không. Điều tốt nhất bạn có thể làm là những gì icktoofay nói.

Điều đó được cho là không quá khó để thực hiện chức năng chuyển đổi giữa một hệ thống và hệ thống kia. Ví dụ:

// Given an X,Y in 1st quadrant cartesian coordinates give the corresponding screen coordinate 
function cartToScreen(px, py) { 
    return [px, -py + HEIGHT]; 
}; 

Vì vậy, bạn muốn viết:

var coords = cartToScreen(50,50); 
// draws 50 pixels from the bottoom instead of 50 pixels from the top 
ctx.fillText("lalala", coords[0], coords[1]); 

Example

Trong mọi trường hợp, tôi muốn đề nghị rằng nếu bạn đang ở tất cả có thể chỉ cần làm quen với màn hình tọa độ. Nó sẽ giúp bạn tiết kiệm được nhiều cơn đau đầu trong tương lai nếu bạn không phải luôn tính đến sự khác biệt nhỏ này.