分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html5 – HTML画布;给定两个X和两个Y,中心文本，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_674_0@

我正在制作一系列矩形.这不是整个脚本,这段@L_673_0@实际上是在一个函数中,带有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,width,height);       

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

</script>

</body>
</html>

解决方法

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

大佬总结

以上是大佬教程为你收集整理的html5 – HTML画布;给定两个X和两个Y,中心文本全部内容，希望文章能够帮你解决html5 – HTML画布;给定两个X和两个Y,中心文本所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：5 html html5 x y 两个中心文本画布给定