Chuyển đổi Canvas HTML
Chuyển đổi Canvas HTML
Với các phép biến đổi, chúng ta có thể dịch gốc sang một vị trí khác, xoay và chia tỷ lệ cho nó.
Sáu phương pháp chuyển đổi là:
-
translate()- di chuyển các phần tử trên khung vẽ đến một điểm mới trong lưới -
rotate()- xoay các phần tử trên khung vẽ theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ -
scale()- chia tỷ lệ các phần tử trên khung vẽ lên hoặc xuống -
transform()- nhân phép biến đổi hiện tại với các đối số được mô tả -
resetTransform()- đặt lại phép biến đổi hiện tại thành ma trận nhận dạng -
setTransform()- đặt lại phép biến đổi hiện tại thành ma trận nhận dạng và sau đó chạy phép biến đổi được mô tả bởi các đối số
Phương thức dịch()
Phương thức translate() được sử dụng để di chuyển một đối tượng/phần tử theo x và y .
Phương thức translate() có các tham số sau:
| Parameter | Description |
|---|---|
| x | Distance to move in horizontal direction (left and right) |
| y | Distance to move in vertical direction (up and down) |
Giả sử một vật được đặt ở vị trí (10,10). Sau đó, chúng tôi sử dụng dịch (70,70). Đối tượng tiếp theo cũng được đặt ở vị trí (10,10), nhưng điều này có nghĩa là đối tượng thứ hai sẽ được đặt ở vị trí x 80 (70 + 10) và ở vị trí y 80 (70 + 10).
Hãy xem xét một số ví dụ:
Ví dụ
Đầu tiên, vẽ một hình chữ nhật ở vị trí (10,10), sau đó đặt dịch() thành (70,70) (Đây sẽ là điểm bắt đầu mới). Sau đó vẽ một hình chữ nhật khác ở vị trí (10,10). Lưu ý rằng hình chữ nhật thứ hai bây giờ bắt đầu ở vị trí (80,80):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50);
</script> Hãy tự mình thử »Ví dụ
Đầu tiên, vẽ một hình chữ nhật ở vị trí (10,10), sau đó đặt dịch() thành (70,70) (Đây sẽ là điểm bắt đầu mới). Sau đó vẽ một hình chữ nhật khác ở vị trí (10,10). Lưu ý rằng hình chữ nhật thứ hai bây giờ bắt đầu ở vị trí (80,80) (70+10, 70+10). Sau đó đặt dịch() thành (80,-65) (Đây sẽ là điểm bắt đầu mới). Sau đó vẽ hình chữ nhật thứ ba ở vị trí (10,10). Lưu ý rằng hình chữ nhật thứ ba bây giờ bắt đầu ở vị trí (160,15) (80+80, 80-65). Lưu ý rằng mỗi lần bạn gọi dịch(), nó sẽ dựa trên điểm bắt đầu trước đó:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(80, -65);
ctx.fillStyle = "yellow";
ctx.fillRect(10,
10, 100, 50);
</script> Hãy tự mình thử »Phương thức xoay ()
Phương thức rotate() xoay hình theo một góc.
Phương thức rotate() có tham số sau:
| Parameter | Description |
|---|---|
| angle | The rotation angle (clockwise) |
Mẹo: Góc được tính bằng radian, không phải độ. Sử dụng (Math.PI/180)*degree để chuyển đổi.
Ví dụ
Xoay hình chữ nhật 20 độ:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rotate((Math.PI/180)*20);
ctx.fillStyle = "red";
ctx.fillRect(50, 10, 100, 50);
</script> Hãy tự mình thử »Ví dụ
Ở đây chúng ta thêm một hình chữ nhật nữa. Cả hai hình chữ nhật sẽ được xoay 20 độ:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rotate((Math.PI/180)*20);
ctx.fillStyle = "red";
ctx.fillRect(50, 10, 100, 50);
ctx.strokeStyle = "blue";
ctx.strokeRect(70, 30, 100, 50);
</script> Hãy tự mình thử » Phương thức tỉ lệ()
Phương scale() chia tỷ lệ các phần tử trên khung vẽ lên hoặc xuống.
Phương thức scale() có các tham số sau:
| Parameter | Description |
|---|---|
| x | Horizontal scaling factor (the width) |
| y | Vertical scaling factor (the height) |
Một đơn vị trên khung vẽ là một pixel. Nếu chúng ta đặt hệ số tỷ lệ thành 2, một đơn vị sẽ trở thành hai pixel và các hình dạng sẽ được vẽ lớn gấp đôi. Nếu chúng ta đặt hệ số tỷ lệ thành 0,5 thì một đơn vị sẽ trở thành 0,5 pixel và các hình dạng sẽ được vẽ ở kích thước bằng một nửa.
Ví dụ
Vẽ một hình chữ nhật. Chia tỷ lệ lên 200%, sau đó vẽ một hình chữ nhật mới:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25,
25);
ctx.scale(2, 2);
ctx.strokeStyle = "blue";
ctx.strokeRect(5, 5, 25, 25);
</script> Hãy tự mình thử »Ví dụ
Vẽ một hình chữ nhật. Chia tỷ lệ lên 50%, sau đó vẽ một hình chữ nhật mới:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(15, 15, 25,
25);
ctx.scale(0.5, 0.5);
ctx.strokeStyle = "blue";
ctx.strokeRect(15, 15, 25, 25);
</script> Hãy tự mình thử »Ví dụ
Vẽ một hình chữ nhật. Chia tỷ lệ chiều rộng thành 200% và chiều cao thành 300%, sau đó vẽ một hình chữ nhật mới:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25,
25);
ctx.scale(2, 3);
ctx.strokeStyle = "blue";
ctx.strokeRect(5, 5, 25, 25);
</script> Hãy tự mình thử »Phương thức biến đổi()
Phương thức transform() nhân phép biến đổi hiện tại với ma trận được mô tả bởi các đối số của phương thức này. Điều này cho phép bạn chia tỷ lệ, xoay, dịch (di chuyển) và nghiêng ngữ cảnh.
Phương thức transform() thay thế ma trận biến đổi và nhân nó với ma trận được mô tả bởi:
át chủ
bạn trai
0 0 1
Phương thức transform() có các tham số sau:
| Parameter | Description |
|---|---|
| a | Horizontal scaling |
| b | Horizontal skewing |
| c | Vertically skewing |
| d | Vertically scaling |
| e | Horizontal moving |
| f | Vertically moving |
Ví dụ
Vẽ một hình chữ nhật màu vàng, chạy ma trận biến đổi mới với transform() . Vẽ một hình chữ nhật màu đỏ, chạy ma trận biến đổi mới, sau đó vẽ một hình chữ nhật màu xanh. Lưu ý rằng mỗi lần bạn gọi transform() , nó sẽ xây dựng trên ma trận chuyển đổi trước đó:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 200, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 200, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 200, 100);
</script> Hãy tự mình thử »Phương thức resetTransform()
Phương thức resetTransform() đặt lại phép biến đổi hiện tại thành ma trận nhận dạng.
Điều này tương đương với việc gọi: ctx.setTransform(1,0,0,1,0,0) .
Phương thức setTransform()
Phương thức setTransform() đặt lại phép biến đổi hiện tại thành ma trận nhận dạng và sau đó chạy phép biến đổi được mô tả bởi các đối số. Điều này cho phép bạn chia tỷ lệ, xoay, dịch (di chuyển) và nghiêng ngữ cảnh.
Phương thức setTransform() có các tham số sau:
| Parameter | Description |
|---|---|
| a | Horizontal scaling |
| b | Horizontal skewing |
| c | Vertically skewing |
| d | Vertically scaling |
| e | Horizontal moving |
| f | Vertically moving |
Ví dụ
Vẽ một hình chữ nhật màu vàng, đặt lại và chạy ma trận biến đổi mới với setTransform() . Vẽ một hình chữ nhật màu đỏ, đặt lại và chạy ma trận biến đổi mới, sau đó vẽ một hình chữ nhật màu xanh. Lưu ý rằng trong ví dụ này, hình chữ nhật màu đỏ không được hiển thị vì nó nằm dưới hình chữ nhật màu xanh:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 200, 100)
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 200, 100);
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 200, 100);
</script>Hãy tự mình thử »