Повернуть текст холста 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);

Кто-нибудь, дайте мне знать, как повернуть текст из центральной точки текста.

Thanks, 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 из его центральной точки

ответ

Смежные вопросы