Question

我正在制作一系列矩形。这不是整个脚本，这个代码实际上是在一个函数中，带有x和y坐标参数以及高度和宽度参数。此功能将用于创建多个矩形。我的问题是我需要将文本居中在x，y，width和height的矩形中......文本的长度会有所不同。

<!DOCTYPE html> 
<html lang="en">
<body>

<canvas id="myCanvas" width="400" height="350">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

    var x = 10;
    var y = 10;
    var width = 180;
    var height = 75;

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


    ctx.lineWidth = 5;
    ctx.strokeStyle="black";    
    ctx.strokeRect(x,y,width,height);       

    ctx.textBaseline = 'top';  
    ctx.font         = '20px Sans-Serif';
    ctx.fillStyle    = 'blue';
    ctx.fillText  ("hello", 30, 50);

</script>

</body>
</html>

Answer 1

您可以使用上下文的measureText方法在绘制文字之前计算文字的位置。

Answer 2

垂直居中使用：

context.textBaseline = "middle";

y_pos = text_area_height / 2;

Answer 3

使用textAlign属性：

context.textAlign ='center';

http://www.html5canvastutorials.com/tutorials/html5-canvas-text-align/

HTML画布;给定两个X和两个Y，中心文本

3 个答案: