如何根据文本长度动态调整画布javascript的中心位置
无论字符串的长度如何,我都要将“我的文本”居中。。。随着文本长度的增加,x坐标需要减少 如何获得字符串的x长度如何根据文本长度动态调整画布javascript的中心位置,javascript,Javascript,无论字符串的长度如何,我都要将“我的文本”居中。。。随着文本长度的增加,x坐标需要减少 如何获得字符串的x长度 <html> <head> <script> window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.ge
<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "12pt Arial";
context.fillText("My TEXT!", 20, 20);
};
imageObj.src = "http://images.google.com/intl/en_ALL/images/srpr/logo11w.png";
};
</script>
</head>
<body>
<canvas width="282px" height="177px" id="myCanvas"></canvas>
</body>
</html>
window.onload=函数(){
var canvas=document.getElementById(“myCanvas”);
var context=canvas.getContext(“2d”);
var imageObj=新图像();
imageObj.onload=函数(){
drawImage(imageObj,0,0);
context.font=“12pt Arial”;
fillText(“我的文本!”,20,20);
};
imageObj.src=”http://images.google.com/intl/en_ALL/images/srpr/logo11w.png";
};
这应该是您要找的
画布上有一个textAlign
属性,您可以将其设置为“中心”。然后在画布的正中间开始填充文本
编辑-这里有一把小提琴只需将其添加到您的代码中即可:
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "12pt Arial";
/// set text alignment to center
context.textAlign = 'center';
/// draw from center
context.fillText("My TEXT!", canvas.width * 0.5, 20);
};
如果需要获得x坐标本身,则需要根据文本的宽度(设置字体后)计算x坐标:
尝试设置文本对齐方式
context.textAlign = "center";
context.fillText("My LONGGGGG TEXT!", (canvas.width)/2, 20);
更改文本对齐是否会将坐标更改为填充文本的中心?如果将坐标设置为画布的中心,并将文本对齐为“中心”,则文本将在指定的x坐标两侧均匀对齐。这里的x坐标是(canvas.width)/2,它是画布的中心,文本将在两侧均匀对齐。
context.textAlign = "center";
context.fillText("My LONGGGGG TEXT!", (canvas.width)/2, 20);