当前位置:编程学习 > JS >>

canvas实现文字水平居中 死活无效的处理方法

我们先在html中加入canvas标签,如下:

<canvas id="myCanvas" width="500" height="300">
接下来呢,我们就要开始用canvas的api来实现了,我们先在画布上加入文字:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font = 'bold 18px sans-serif';

ctx.fillText('易做图,容易做图', 10, 200);


在这里呢,注意fillText这个方法,它一共有四个参数,ctx.fillText(text, x, y, maxWidth),

分别是text(在画布上输出的文本)

x(文字在画布x轴的坐标位置)

y(文字在画布y轴的坐标位置)

maxWidth(可选。允许的最大文本宽度,以像素计)


文字水平居中有这么一个方法叫:ctx.textAlign,乍一看跟css的text-align:center一样,那么我们把这个方法加上去结果如何呢,你会发现文字并没有按照理想的状态水平对齐

那么到底怎样才能让他水平居中呢,其实非常简单,我们只需要将fillText的第二个参数,也就是文字在x轴的位置,设置为canvas宽度的一半就可以实现了。

全部代码如下:

<!DOCTYPE html>
<html>
<body>
 
<canvas id="myCanvas" width="500" height="300" >
您的浏览器不支持H5
</canvas>
 
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
ctx.font = 'bold 18px sans-serif';
ctx.textAlign = 'center';
ctx.fillText('易做图,容易做图', 250, 200);
 
</script>
 
</body>
</html>
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,