Hình lục giác có sáu cạnh bằng nhau. Nếu chúng ta tưởng tượng điểm xuất phát của mình là tâm của hình lục giác, thì chúng ta có thể di chuyển quanh điểm này sáu lần, nối từng điểm khi chúng ta đi để tạo các cạnh.
Hãy bắt đầu bằng cách tạo bối cảnh <canvas>có 2d bản vẽ . Chúng tôi sẽ cố định kích thước của canvas thành 400 x 200 pixel cho ví dụ này và đặt điểm trung tâm là (200, 100).
<canvas></canvas>const canvas = document.querySelector("canvas");
canvas.width = 400;
canvas.height = 200;
const ctx = canvas.getContext("2d");
const cx = 200;
const cy = 100;
Bây giờ chúng ta cần tìm ra vị trí x (ngang) và y (dọc) của các điểm xung quanh tâm, khi nối với một đường thẳng, sẽ tạo thành sáu cạnh bằng nhau. Đối với điều này, chúng tôi sử dụng phép đo từ tâm đến điểm (chúng tôi sẽ gọi đây là bán kính) và góc hướng từ tâm.
Vì có 360 độ trong một vòng quay đầy đủ và sáu điểm chúng tôi muốn tạo, chúng tôi có thể chia 360/6 và biết rằng chúng tôi sẽ tạo một điểm sau mỗi 60 độ. Tuy nhiên, có một cảnh báo nhỏ về vấn đề này – JavaScript hoạt động radiansvới degrees. Một điều tôi luôn nhớ là giá trị pitrong radianslà 180 độ, hoặc nửa vòng tròn. Vì vậy (Math.PI*2)/6, sẽ cung cấp cho chúng tôi mỗi vòng quay trong radians hoặc thậm chí đơn giản hơn Math.PI/3.
Tiếp theo, chúng ta cần thêm một chút lượng giác để tìm vị trí x và y của mỗi điểm. Đối với vị trí x, chúng ta có thể sử dụng tổng bán kính nhân với cos(angle) và đối với bán kính vị trí y nhân với sin(angle) . Hãy đặt tất cả lại với nhau, thêm vào mã JavaScript của chúng tôi ở trên:
JS
// set the radius of the hexagon
const radius = 50;
// move the canvas to the center position
ctx.translate(cx, cy);
for (let i = 0; i < 6; i++) {
// calculate the rotation
const rotation = (Math.PI / 3) * i;
// for the first point move to
if (i === 0) {
ctx.moveTo(radius * Math.cos(rotation), radius * Math.sin(rotation));
} else {
// for the rest draw a line
ctx.lineTo(radius * Math.cos(rotation), radius * Math.sin(rotation));
}
}
// close path and stroke it
ctx.closePath();
ctx.stroke();
