Rất lớn vòng tròn canvas HTML5 không chính xác

Question

Tôi đang phát triển một ứng dụng nơi người dùng vẽ các cấu trúc euclide trên canvas HTML5. Vì vậy tôi không thể giới hạn kích thước của một số hình dạng nhất định. Khi exaploring vòng tròn rất lớn được vẽ trên màn hình, tôi nhận thấy rằng các vòng tròn rất lớn không có bán kính không đổi.

Để cụ thể hơn, một vòng tròn được xác định bởi hai điểm, một điểm trung tâm và một chỉ định bán kính không đi qua điểm bán kính nữa!

Vòng tròn lớn hơn nữa. Đây là tất cả phải đi qua điểm E.

Lỗi không occure về bội số của 45 độ = PI/4. Giữa các bội số lỗi là lớn nhất (PI/8 chẳng hạn)

Dưới đây là một jsfiddle chứa ví dụ đầu tiên ở trên:

http://jsfiddle.net/D28J2/2/

Câu hỏi của tôi: Tại sao occure này? và Có một số cách để (hiệu quả) làm việc xung quanh này?

Answer 1

Cách tôi làm việc xung quanh vấn đề này hoàn toàn là cuộn thực hiện của riêng tôi về một vòng tròn vẽ xấp xỉ với đường cong bezier. Bạn có thể tìm thấy bài viết chi tiết về việc triển khai tại đây http://www.tinaja.com/glib/ellipse4.pdf.

function magic_circle(ctx, x, y, r){ 
    m = 0.551784 

    ctx.save() 
    ctx.translate(x, y) 
    ctx.scale(r, r) 

    ctx.beginPath() 
    ctx.moveTo(1, 0) 
    ctx.bezierCurveTo(1, -m, m, -1, 0, -1) 
    ctx.bezierCurveTo(-m, -1, -1, -m, -1, 0) 
    ctx.bezierCurveTo(-1, m, -m, 1, 0, 1) 
    ctx.bezierCurveTo(m, 1, 1, m, 1, 0) 
    ctx.closePath() 
    ctx.restore() 
} 

Chỉ với bốn phân đoạn này, tôi có thể ước chừng vòng tròn tốt hơn nhiều khi xây dựng trong triển khai canvas google chrome.

Answer 2

Trong Google chrome tôi có thể lặp lại vấn đề nhưng trong IE 9 và IE 10 tất cả đều ổn.

Vì vậy, tôi đoán là triển khai không đúng trong Chrome. Nó có thể là một lỗi làm tròn hoặc họ sử dụng một phương pháp nội suy để tránh tội lỗi và cos mà không phải là rất chính xác.

Look đây cũng như: HTML5 canvas arcs not rendering correctly in Google Chrome

Công việc duy nhất xung quanh tôi có thể tưởng tượng được vẽ hình tròn bằng mã riêng của bạn hoặc sử dụng một (jQuery?) Plug-in mà thực hiện điều này cho bạn.

Answer 3

Đây có thể là lỗi ngắt điểm nổi. Có thể vì sin và cosin không đưa ra giá trị hoàn toàn chính xác. Bạn có thể sử dụng nó (ít nhất trong Chrome) bằng cách xoay canvas thay vì hình cung.

ctx.save();   // Save the canvas so we can rotate back. 
ctx.translate(x, y); // Translate to the origin point. 
ctx.rotate(alpha); // Rotate the proper angle. 

ctx.arc(0, 0, 3, 0, Math.PI*2); // Draw the small circle at the origin. 
ctx.fill(); 

ctx.arc(r, 0, r, 0, Math.PI*2); // Create a big with the origin 1 radius away. 
ctx.restore();     // Restore the canvas to the original orientation 
           // before drawing. Otherwise the circle looks bad. 
ctx.strokeStyle = "black"; 
ctx.stroke();     // Draw! 

Tôi là một người hâm mộ lớn thao túng khung hình thay vì hình dạng. Nó cung cấp cho bạn một khu vực hợp lý hơn để làm việc. Xem http://jsfiddle.net/D28J2/10/

Answer 4

Chỉ cần ném điều này ra khỏi đó nhưng nó có thể là một vấn đề mà không chỉ định đủ số PI? Bất cứ khi nào tôi làm những việc như thế, tôi có xu hướng hơi bị quá tải và sử dụng khoảng 10 chữ số PI.