어떻게 같은 캔버스 객체를 회전 할 수있는 방법 캔버스 컨텍스트

를 회전 -어떻게 같은 캔버스 객체를 회전 할 수있는 방법 캔버스 컨텍스트

ctx.beginPath(); 
ctx.fillStyle = 'rgba(52, 52, 53, 0.75)'; 
ctx.fillRect(50, 50, 100, 100);

그것은 루프 일 필요는 없다,하지만이 어떻게 회전 할 수 있습니까? 이처럼

출처

2014-11-02 Alex

@M. 페이지의 대답으로 인해이 문제가 발생할 수 있지만 실제로는 생각하지는 않습니다. 일반적으로 rotate()은 개체의 중간 지점이 아니라 다른 지점 (0,0)입니다. 이 문제를 해결하려면 객체의 중간 점을 (0,0)으로 만들고 회전 한 다음 다시 번역해야합니다. 이와 같이 :

ctx.translate((c.width/2) - 50, (c.height/2) - 50); // move back 
ctx.rotate(20*Math.PI/180); // rotate 
ctx.translate((-c.width/2) + 50, (-c.height/2) + 50); // move to 0,0 
ctx.fillRect(50, 50, 100, 100); // Notice the middle point would be (x+50, y+50)

실제로는 그래픽 스택이 어떻게 작동하는지 상향식으로 확인합니다.

Here is an example의 경우 translate()을 주석 처리하면 차이가 있음을 알 수 있습니다.

-50 및 +50은 중간에 상자의 중심을 배치 한 것에서 비롯됩니다. 상자가 없으면 상자의 중심이 아닌 상자의 오른쪽 하단 모퉁이를 중심으로 회전합니다. Without the +50/-50

With the middle box point +50/-50
은 기본적으로 우리는 우리의 상자의 중간 지점이 (0,0)에있는 위치로 번역 할 : 시각적 예제를 제공합니다.

출처

2014-11-02 20:40:30

+50과 -50은 무엇입니까? – Alex

@AlexSafayan 우리 박스의 중간 지점은 양쪽의 왼쪽 모서리에서 50 픽셀이기 때문입니다. 그렇지 않으면 상자의 왼쪽 상단 모퉁이를 중심으로 회전합니다. –

@AlexSafayan이 답변을 명확하게 표시하기 위해 업데이트했습니다. 링크에는 두 개의 애니메이션 회전이 있습니다. –

<html> 
<body> 
<canvas id="myCanvas" width="134px" height="331px" onclick="draw()"></canvas> 
<script> 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.fillStyle = 'rgba(52, 52, 53, 0.75)'; 
    ctx.rotate(20*Math.PI/180); 
    ctx.fillRect(50, 50, 100, 100); 
</script> 
</body> 
</html>

출처

2014-11-02 20:26:18

html, css 및 javascript를 추가 할 수 있습니까? – Alex

여기에 ... –

어떻게 같은 캔버스 객체를 회전 할 수있는 방법 캔버스 컨텍스트

답변

관련 문제