중심점에서 html5 캔버스 텍스트 회전

HTML5 캔버스 텍스트를 중심점에서 동적 X, Y 값으로 회전하려고합니다. stackoverflow 링크 HTML5 rotate text around it's centre point에서 언급 한 바와 같이 아래 코드를 사용했습니다. 텍스트는 항상 시작점에서 회전합니다. 중심점 회전에서 필요합니다. 이것은 내 코드입니다.중심점에서 html5 캔버스 텍스트 회전

this.ctx.textAlign = "center"; 
this.ctx.textBaseline = "middle"; 
this.ctx.translate(options.x , options.y); 
this.ctx.rotate(options.labelRotation * Math.PI/180); 
this.ctx.fillText(label, 0, 0);

누구나 텍스트의 중심점에서 텍스트를 회전하는 방법을 알려주십시오.

감사합니다. Bharathiraja.

출처

2014-09-16 Bharathi

코드는 노력하고 있습니다 : http://jsfiddle.net/m1erickson/d40xr8nL/

를 그것의 최종에서 작동하지 않는 경우 :

이 옵션 속성이 유효해야합니다.
ctx.save & ctx.restore (변환이 누적되기 때문에)로 코드를 래핑하십시오.

예제 코드 :

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var x=150; 
    var y=150; 
    var labelRotation=45; 
    var label="This is some text."; 

    animate(); 

    function draw(){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     // 
     ctx.beginPath(); 
     ctx.arc(x,y,3,0,Math.PI*2); 
     ctx.closePath(); 
     ctx.fill(); 
     // 
     ctx.save(); 
     ctx.textAlign = "center"; 
     ctx.textBaseline = "middle"; 
     ctx.translate(x , y); 
     ctx.rotate(labelRotation * Math.PI/180); 
     ctx.fillText(label, 0, 0); 
     ctx.restore(); 
    } 

    function animate(){ 
     requestAnimationFrame(animate); 
     labelRotation++; 
     draw(); 
    } 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

출처

2014-09-16 15:58:06 markE

중심점에서 html5 캔버스 텍스트 회전

답변

관련 문제