Question

我正在努力为我的问题找到一个问题。

我想在画布上写一些东西，我想设置的是与文本中间而不是开头的x和y。

想象一下，你想在画布的中心写上“你好”。

实际上你做ctx.fillText("hello",canvas.witdh*0.5,canvas.height*0.5);

这里的问题是H位于中心位置，而不是其余位置。

何我可以将文本放在双'll'中间？

有点像ctx.fillText("hello",canvas.witdh*0.5-"hello".width,canvas.height*0.5-"hello".height);

感谢您的帮助。

Answer 1

我认为画布文字指标可以帮助您解决这个问题。在原理中，您在绘制文本之前测量文本。这样你就可以计算出正确的位置。

看here

Answer 2

每个答案中的解决方案的比特！

@foz正确地说context.textAlign会自动将文本水平居中。

@ user3190532和@philipp正确地说context.measureText将计算文本宽度以进行手动居中。

我的目的是近似字体高度以获得稍微准确的垂直居中：

var approxFontHeight=parseInt(ctx.font);

以下是示例代码和演示：http://jsfiddle.net/m1erickson/YjLKD/

enter image description here

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/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");
    ctx.font="18px verdana";


    // Testing
    drawCenteredText("Hello",canvas.width/2,canvas.height/2);

    function drawCenteredText(text,centerX,centerY){

        // save the unaltered context
        ctx.save();

        // approximate the font height
        var approxFontHeight=parseInt(ctx.font);

        // alter the context to center-align the text
        ctx.textAlign="center";

        // draw the text centered at [centerX,centerY]
        ctx.fillText(text,centerX,centerY+approxFontHeight/4);

        // restore the unaltered context
        ctx.restore();

        // draw some guidelines just for testing
        ctx.beginPath();
        ctx.moveTo(centerX,0);
        ctx.lineTo(centerX,canvas.height);
        ctx.moveTo(0,centerY);
        ctx.lineTo(canvas.width,centerY);
        ctx.stroke();

    }

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

Answer 3

首先打电话：

ctx.textAlign = 'center';

并且您现有的代码将完成我认为的技巧。

Answer 4

正如他们所说，试试这个：

var textWidth = ctx.measureText("hello").width;
ctx.fillText("hello",canvas.witdh*0.5-textWidth*0.5,canvas.height*0.5)

并以'll'

为中心

）

在画布中获取文本输入的中心

4 个答案: