Phương trình để tìm các điểm của hình elip với bán trục rx
và ry
, được xoay theo góc fi
.
Tính toán điểm cho tham số
var r_x = circle_x * Math.cos[circRot] - circle_y * Math.sin[circRot];
var r_y = circle_x * Math.sin[circRot] + circle_y * Math.cos[circRot];
0 trong phạm vi var r_x = circle_x * Math.cos[circRot] - circle_y * Math.sin[circRot];
var r_y = circle_x * Math.sin[circRot] + circle_y * Math.cos[circRot];
1 với bước cần thiết.x = rx * Cos[t] * Cos[fi] - ry * Sin[t] * Sin[fi] + cx
y = rx * Cos[t] * Sin[fi] + ry * Sin[t] * Cos[fi] + cy
Ví dụ cho RX = 100, RY = 60, fi = -pi/6:
Bổ sung: Có vẻ như bạn tính toán các điểm elip trong tệp fluid.js tại đây:
var r_x = circle_x * Math.cos[circRot] - circle_y * Math.sin[circRot];
var r_y = circle_x * Math.sin[circRot] + circle_y * Math.cos[circRot];
Vì vậy, bạn cần sửa đổi các dòng này để kiểm tra chúng:
var ellipseRot = Math.PI / 4
var r_x = circle_x * Math.cos[circRot] * Math.cos[ellipseRot]- circle_y * Math.sin[circRot] * Math.sin[ellipseRot];
var r_y = circle_x * Math.sin[circRot] *Math.sin[ellipseRot] + circle_y * Math.cos[circRot] * Math.cos[ellipseRot];
Sau đó thay đổi
var r_x = circle_x * Math.cos[circRot] - circle_y * Math.sin[circRot];
var r_y = circle_x * Math.sin[circRot] + circle_y * Math.cos[circRot];
2 với thanh trượt Tóm tắt: Trong hướng dẫn này, bạn sẽ học cách sử dụng phương pháp JavaScript
3 để xoay các đối tượng vẽ.: in this tutorial, you’ll learn how to use the JavaScript var r_x = circle_x * Math.cos[circRot] - circle_y * Math.sin[circRot];
var r_y = circle_x * Math.sin[circRot] + circle_y * Math.cos[circRot];
var r_x = circle_x * Math.cos[circRot] - circle_y * Math.sin[circRot];
var r_y = circle_x * Math.sin[circRot] + circle_y * Math.cos[circRot];
3 method to rotate drawing objects.Giới thiệu về API canvas rots [] Canvas API
var r_x = circle_x * Math.cos[circRot] - circle_y * Math.sin[circRot];
var r_y = circle_x * Math.sin[circRot] + circle_y * Math.cos[circRot];
3 là một phương pháp của bối cảnh bản vẽ 2D. Phương thức xoay [] cho phép bạn xoay một đối tượng vẽ trên khung vẽ.Đây là cú pháp của phương pháp
var r_x = circle_x * Math.cos[circRot] - circle_y * Math.sin[circRot];
var r_y = circle_x * Math.sin[circRot] + circle_y * Math.cos[circRot];
3:Code language: CSS [css]
ctx.rotate[angle]
Phương pháp
var r_x = circle_x * Math.cos[circRot] - circle_y * Math.sin[circRot];
var r_y = circle_x * Math.sin[circRot] + circle_y * Math.cos[circRot];
3 chấp nhận một góc xoay trong radian.Nếu góc dương, vòng quay theo chiều kim đồng hồ. Trong trường hợp góc là âm, vòng quay ngược chiều kim đồng hồ.
Để chuyển đổi một mức độ thành radian, bạn sử dụng fomular sau:
Code language: JavaScript [javascript]
degree * Math.PI / 180
Khi thêm một vòng quay, phương pháp
var r_x = circle_x * Math.cos[circRot] - circle_y * Math.sin[circRot];
var r_y = circle_x * Math.sin[circRot] + circle_y * Math.cos[circRot];
3 sử dụng nguồn gốc khung vẽ làm điểm trung tâm quay.Hình ảnh sau đây minh họa cho vòng quay:
Nếu bạn muốn thay đổi điểm trung tâm xoay, bạn cần di chuyển nguồn gốc của khung vẽ bằng phương pháp
var r_x = circle_x * Math.cos[circRot] - circle_y * Math.sin[circRot];
var r_y = circle_x * Math.sin[circRot] + circle_y * Math.cos[circRot];
8.Ví dụ rotate [] JavaScript
Ví dụ sau đây vẽ một hình chữ nhật màu đỏ bắt đầu từ trung tâm của khung vẽ. Sau đó, nó dịch nguồn gốc của Canvas sang trung tâm Canvas và vẽ hình chữ nhật thứ hai với vòng quay 45 độ:
HTML
Code language: HTML, XML [xml]
JavaScript
Code language: JavaScript [javascript]
const canvas = document.querySelector['#canvas']; if [canvas.getContext] { // rectangle's width and height const width = 150, height = 20; // canvas center X and Y const centerX = canvas.width / 2, centerY = canvas.height / 2; const ctx = canvas.getContext['2d']; // a red rectangle ctx.fillStyle = 'red'; ctx.fillRect[centerX, centerY, width, height]; // move the origin to the canvas' center ctx.translate[centerX, centerY]; // add 45 degrees rotation ctx.rotate[45 * Math.PI / 180]; // draw the second rectangle ctx.fillStyle = 'rgba[0,0,255,0.5]'; ctx.fillRect[0, 0, width, height]; }
Đây là liên kết demo.
Output:
Bản tóm tắt
- Sử dụng phương thức JavaScript
3 để xoay đối tượng bản vẽ trên khung vẽ.var r_x = circle_x * Math.cos[circRot] - circle_y * Math.sin[circRot]; var r_y = circle_x * Math.sin[circRot] + circle_y * Math.cos[circRot];
Hướng dẫn này có hữu ích không?