Vì vậy, hãy vẽ một lưới trên vải 300x300:
http://jsfiddle.net/simonsarris/4uaZy/
này sẽ làm. Không có gì đặc biệt. Một đường màu đỏ biểu thị nơi nguồn gốc được đặt bằng cách chạy qua (0,0) và mở rộng rất xa, vì vậy khi chúng tôi dịch nó sẽ thấy một cái gì đó. Nguồn gốc ở đây là góc trên cùng bên trái, nơi các đường màu đỏ gặp nhau tại (0,0).
Tất cả các bản dịch dưới đây xảy ra trước khi chúng tôi vẽ lưới, vì vậy chúng tôi sẽ di chuyển lưới. Điều này cho phép bạn thấy chính xác những gì đang xảy ra với orgiin.
Vì vậy, cho phép dịch các canvas bởi 100.100, di chuyển nó xuống + phải:
http://jsfiddle.net/simonsarris/4uaZy/1/
Vì vậy, chúng tôi đã dịch nguồn gốc, đó là nơi mà các X màu đỏ là tập trung. Nguồn gốc hiện tại là 100,100.
Bây giờ, chúng tôi sẽ dịch và sau đó mở rộng. Lưu ý cách nguồn gốc ở cùng một vị trí với hình ảnh cuối cùng, mọi thứ chỉ lớn gấp đôi.
http://jsfiddle.net/simonsarris/4uaZy/2/
Boom. Orgin vẫn ở mức 100,100. Tất cả mọi thứ được phồng lên bởi 2 mặc dù. Nguồn gốc đã thay đổi, sau đó mọi thứ bị phồng lên tại chỗ.
Bây giờ, hãy xem chúng ngược lại.Lần này chúng tôi mở rộng quy mô đầu tiên, vì vậy tất cả mọi thứ là chất béo từ khi bắt đầu:
http://jsfiddle.net/simonsarris/4uaZy/3/
Mọi thứ đều căng phồng bởi 2. Nguồn gốc là 0,0, điểm khởi đầu của nó.
Bây giờ, chúng tôi thực hiện quy mô và sau đó dịch.
http://jsfiddle.net/simonsarris/4uaZy/4/
Chúng tôi đang dịch bởi 100.100 yên, nhưng nguồn gốc đã xúc động bởi 200.200 pixel thực sự. So sánh điều này với hai hình ảnh trước đó.
Điều này là do mọi thứ xảy ra sau khi chia tỷ lệ phải được thu nhỏ, bao gồm cả các phép biến đổi bổ sung. Vì vậy, chuyển bằng (100.100) trên một canvas quy mô dẫn đến nó di chuyển bằng 200, 200.
Điều takeaway cần nhớ ở đây là thay đổi sự chuyển đổi ảnh hưởng đến cách mọi thứ được rút ra (hoặc chuyển!) Từ đó trở đi . Nếu bạn mở rộng x2, và sau đó dịch, bản dịch sẽ được x2
Nếu bạn muốn xem, về mặt toán học, những gì đang xảy ra ở mỗi bước tôi khuyến khích bạn hãy nhìn vào mã ở đây:
https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js
Điều này bắt chước toàn bộ quá trình chuyển đổi được thực hiện bằng canvas và cho phép bạn xem các biến đổi trước đó sửa đổi những điều sau đó như thế nào.
Giải thích tuyệt vời. Dường như rõ ràng bây giờ :) – DougN
Vâng, một cái gì đó vẫn không có ý nghĩa. Nhìn vào cái này: http://jsfiddle.net/sdJ7v/1/ Thử và sai đã giúp tôi đặt vòng tròn màu xanh vào giữa màu xanh lá cây. Nhưng với các tọa độ, sự bù đắp đó không có ý nghĩa. Không chắc chắn làm thế nào biến đổi đang được áp dụng ... – DougN
xin vui lòng xem ý kiến của tôi ở đây: http://jsfiddle.net/simonsarris/sdJ7v/2/ Điều đó có ý nghĩa? –