fillText不显示，strokeText显示

最新推荐文章于 2024-06-10 21:57:03 发布

m0_49471668

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量321

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_49471668/article/details/134830059

版权

fillText 和 strokeText 是 HTML5 的 Canvas API 中的两个方法，分别用于填充文本和描边文本。如果你发现 fillText 不显示，而 strokeText 显示，有可能是以下原因：

颜色设置问题：确保你设置的填充颜色或描边颜色与背景颜色有足够的对比度，以便文本能被清晰地读取。
上下文对象：在使用这些方法之前，你需要确保你正在使用的上下文对象是正确的，以及是否已经创建了Canvas的上下文。
文本渲染问题：在一些情况下，可能由于字体、大小或其他文本属性的设置问题，导致 fillText 不显示。
文本对齐问题：如果你在Canvas上绘制文本，可能需要考虑文本对齐。默认情况下，文本起始位置是从左上角开始的。如果文本的位置不在可视区域内，你可能看不到它。
Canvas的状态：在一些情况下，可能由于之前的绘图操作改变了Canvas的状态，导致之后的文本绘制出现问题。

这是一个示例代码，显示如何使用 fillText 和 strokeText：

<!DOCTYPE html>  
<html>  
<body>  
  
<canvas id="myCanvas" width="500" height="150" style="border:1px solid #d3d3d3;">  
Your browser does not support the HTML5 canvas tag.  
</canvas>  
  
<script>  
var c = document.getElementById("myCanvas");  
var ctx = c.getContext("2d");  
ctx.font = "30px Arial";  
ctx.fillStyle = "red";  
ctx.strokeStyle = "black";  
  
// 使用 fillText 填充文本  
ctx.fillText("Hello World", 10, 50);  
  
// 使用 strokeText 描边文本  
ctx.strokeText("Hello World", 10, 100);  
</script>  
  
</body>  
</html>