Hướng dẫn how to rotate an ellipse in javascript - cách xoay một hình elip trong javascript

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

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);

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);

Đâ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);

ctx.rotate(angle)
Code language: CSS (css)

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);

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:

degree * Math.PI / 180
Code language: JavaScript (javascript)

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);

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);

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

<canvas id="canvas" height="300" width="500">
canvas>



Code language: HTML, XML (xml)

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);

}
Code language: JavaScript (javascript)

Đây là liên kết demo.

Output:

Bản tóm tắt

• Sử dụng phương thức 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);
  

  3 để xoay đối tượng bản vẽ trên khung vẽ.

Hướng dẫn này có hữu ích không?