Mac에서 Chrome 캔버스 문제

Question

캔버스 요소에서 회전 된 사각형의 그리기, 지우기 및 다시 그리기가 Mac의 Google 크롬에서 작동하지 않는 이유를 오랫동안 찾고있었습니다.

캔버스에 마우스 오버레이를 렌더링하고 싶기 때문에이 기능이 필요합니다.

내 코드를 나타내는 바이올린 만들었습니다 link

HTML :

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

자바 스크립트 :

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

이 제외 창에 모든 브라우저에서 잘 작동하고 맥 Mac 용 Chrome. 내가 선

// ctx.rotate(angle); 

을 주석 때

는 사각형 캔버스에 그려집니다. (물론 회전이 없음)

내가 잘못 했습니까? 아니면 Chrome의 버그일까요?

편집 :이 테스트 페이지가 Mac에서 크롬에서 작동하기 때문에 크롬에서 아마 아닐 버그 :

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

편집 2 : 나는이에 대한 좀 더 많은 연구를하고있다 그리고 나는이 문제가 기록 발견 내가 거기에 테스트 바이올린을 가져다 회전 캔버스 요소를 몇 가지 검사를 더 추가 link

: link 이 정보를 읽는 당신은 작은 캔버스에 그릴 때, 문제는 "해결"입니다.

내가 그들을 만들고, 위의 바이올린의 캔버스의 크기를 변경할 그냥 작은 .1 화소 :

여기 바이올린의 내 결과를 참조하십시오. 그러면 결과는 괜찮습니다.

최종 결론 : 그것은 내가 한 번 회전 된 사각형을 그릴 수 있습니다 보인다. 하지만 clearRect 메서드를 사용하여 캔버스를 지울 때 사각형을 다시 그릴 수 없습니다. 이것은 캔버스의 크기가 충분히 클 경우에만 발생합니다. (65600px보다 큰)

Macromedia에서 Chrome을 사용하여 캔버스에서 직사각형을 그리고 다시 그릴 수있는 사람은 누구입니까?

나는 이것에 대해 미쳐 가고 있습니다.

Answer 1

수행 한 조사에 따르면 브라우저 버그라는 것을 이미 알고 있기 때문에 스스로 수정할 수는 없습니다. 그러나 서로 인접한 더 작은 캔버스를 사용하고 각기 다른 오프셋을 사용하여 도형의 가장자리가 정렬되도록하여 문제를 해결할 수 있습니다.

코드의 관점에서보기에는 좋지 않지만 시각적으로는 동일하게 보이며 버그를 해결해야합니다.

나는 설명하기 위해 바이올린을 수정 한 : http://jsfiddle.net/z8f2f/35/