失效原因一：fillText绘制文本时，字体文件尚未加载完成
字体文件4.2M，加载时长23ms
解决方案
1、压缩字体
2、.ttf转成.woff2，可搜索在线ttf转woff2网站转换 https://www.fontke.com/tool/convfont/
3、window.onload
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>canvas</title>
<style>
body {
margin: 0;
}
@font-face {
font-family: yanzhenqing;
src: url("颜体书法.woff2");
}
#cvs {
border: 1px solid red;
}
.cs {
font-size: 30px;
font-family: yanzhenqing;
}
</style>
</head>
<body>
<div class="cs">如果onload不生效，可尝试canvas前添加使用该字体的文本，并且不能使用display none隐藏</div>
<canvas id="cvs" width="300" height="500"></canvas>
<script>
window.onload = function () {
let c = document.getElementById("cvs");
let ctx = c.getContext("2d");
ctx.font = "30px yanzhenqing";
ctx.fillText("文本内容文本内容", 0, 30);
};
</script>
</body>
</html>
4、canvas标签前必须要加使用过该字体样式的文本，可设置透明度或者高度隐藏，display none不生效
网友评论