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

Joh*_*n R 3 html5 canvas

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


<!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>
Run Code Online (Sandbox Code Playgroud)

lin*_*ogl 5

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