Vấn đề về Canvas với Chrome trên Mac

Question

Tôi đã tìm kiếm một thời gian dài vì lý do vẽ, xóa và vẽ lại hình chữ nhật xoay trên phần tử canvas không hoạt động trong google chrome trên mac.

Tôi cần điều này vì tôi muốn hiển thị lớp phủ di chuột trên canvas.

Tôi đã tạo một Fiddle đại diện cho mã của tôi: link

Html:

<canvas id="canvas" width="400" height="165" style="left: 0px; top: 0px; background-color:red;"></canvas> 

Javascript:

var canvas =null; 
var ctx; 
var target; 

$(function() { 
     canvas=document.getElementById('canvas'); 
     ctx = canvas.getContext('2d'); 
     target = { h:81, id:"i1_2", isempty:false, r:-11.64, w:60, x:143, y:19, zindex:2}; 
}); 

function drawRectangle() { 
     ctx.save(); 
     ctx.translate(target.x, target.y); 
     ctx.fillStyle = "green"; 
     ctx.strokeStyle = "blue"; 
     ctx.globalAlpha = 0.40; 
     ctx.rotate(target.r/180 * Math.PI); //NO Rotation => It works! 
     ctx.fillRect(0,0,target.w,target.h); 
     ctx.restore(); 
} 

function clearRectangle() { 
    ctx.clearRect(0,0,400,165); 
}  

này hoạt động tốt trên mọi trình duyệt trên Windows và Mac trừ Chrome trên máy Mac.

Khi tôi nhận xét ra dòng

// ctx.rotate(angle); 

Hình chữ nhật được vẽ trên vải. (không có vòng quay tất nhiên)

Tôi đã làm gì sai? Hay đây có phải là một lỗi trong Chrome?

Edit: Có lẽ không phải là một lỗi trong Chrome bởi vì trang thử nghiệm này hoạt động trong chrome trên Mac:

http://www.html5canvastutorials.com/demos/advanced/html5_canvas_transform_rotate/

Chỉnh sửa 2: Tôi đã làm một số nghiên cứu thêm về vấn đề này và tôi thấy vấn đề này đăng nhập : link

Tôi đã thử nghiệm fiddle và thêm một số thử nghiệm với các yếu tố canvas xoay: link Đọc thông tin đó, sự cố được "giải quyết" khi bạn vẽ trên canvas nhỏ hơn.

Xem ở đây kết quả của tôi về fiddle:

Khi tôi thay đổi kích thước của các bức tranh sơn dầu trong fiddle trên, làm cho chúng chỉ 1pixel nhỏ hơn. Sau đó, kết quả là ok.

kết luận cuối cùng: Có vẻ như tôi có thể vẽ một hình chữ nhật xoay một lần. Nhưng khi tôi sử dụng phương pháp clearRect để xóa canvas, tôi không thể vẽ hình chữ nhật một lần nữa. Điều này chỉ xảy ra khi kích thước của canvas đủ lớn. (Lớn hơn 65600px)

Có ai trong số các bạn biết về sự sollution vì vậy tôi có thể vẽ và vẽ lại hình chữ nhật trên canvas bằng chrome on mac?

Tôi phát điên vì điều này.

Answer 1

Đánh giá bởi nghiên cứu bạn đã thực hiện bạn đã biết đây là lỗi trình duyệt, do đó bạn không thể tự khắc phục sự cố này. Tuy nhiên, bạn có thể làm việc xung quanh vấn đề bằng cách sử dụng các khung hình nhỏ hơn kề nhau và vẽ trên mỗi khung hình có độ lệch khác nhau để các cạnh của hình dạng của bạn được căn chỉnh.

Nó không chính xác tốt đẹp từ quan điểm của mã, nhưng trực quan nó sẽ trông giống nhau và nó sẽ làm việc xung quanh lỗi.

Tôi đã sửa đổi fiddle của bạn để chứng minh: http://jsfiddle.net/z8f2f/35/