[英]Rotate html5 canvas text from its center point
我想从其中心位置旋转带有动态X,Y值的HTML5画布文本。 我使用了以下代码,如stackoverflow链接HTML5所述, 围绕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);
任何人都让我知道如何从文本的中心点旋转文本。
谢谢,巴拉希拉雅。
您的代码正在运行: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.