在浏览问题时，我从未找到以上的明确答案。我想要一种适用于几乎所有平台的方法。因此，为了社区的利益，我想与他人分享让自定义字体在画布上工作的成功。我的主要问题是，确保所说字体正常工作的保证方法是什么？我尝试了多种方法，例如仅使用CSS样式表，但这要复杂得多。这是我发现的：
我将在下面讨论我的代码。首先，我的Javascript：
window.onload = function start() {
canvas = document.getElementById('canvas1');
C_Width = canvas.width;
C_Height = canvas.height;
cxt = canvas.getContext('2d');
setTimeout(text_handler,200);
}
function text_handler() {
console.log('made it!');
cxt.font="20px myFont";//font size and then font family.
cxt.fillStyle="white"; //color to be seen on a black canvas, default is black text
cxt.fillText("TEST",(C_Width/2-200),C_Height/2); //cxt.fillText("message",x_coord,y_coord);
}
请允许我解释一下这里发生了什么。我有一个简单的window.onload功能，以便在尝试获取其ID和上下文之前画布已存在。在text_handler()函数内部，我在一行中定义了字体大小和字体系列以及字体颜色（白色，因为我有黑色画布）。然后在画布上绘制消息，并提供x坐标和ay坐标。该setTimeout();延迟可以是必要的，以便得到画布时间来加载该字体。在我编写的测试程序中，虽然100ms几乎没有引起注意，但实际上延迟时间却非常短。另一个关键部分是CSS样式表：
canvas {
background-color: black; //for white text
font-family:myFont; //necessary
}
#load {
font-family:myFont; //necessary to load font with div
visibility: hidden; //makes div invisible but the div element forces the text to load before the canvas.
height: 0px;
}
@font-face {
font-family:myFont;
src: url('./Font_Path.ttf');
} //self-explanatory
我当然已经在画布中定义了字体，网页的正文以及必要的隐藏div。div有助于加载字体。我有一些样式，以使div保持不可见，但仍能发挥作用。由于某种原因，通过测试，我确定该font-family样式必须高于div中的其他样式。当然，您可以使用任何您想要的东西。当然，我也使用@font-face我的自定义字体。
HTML如下所示：
<body>
<div id="load">words</div> <!-- load font -->
<canvas id="canvas1" width="500px" height="500px"></canvas>
</body>
如上所述，在画布可以实现字体之前，div是加载字体所必需的。这就是为什么我里面有“单词”的原因。
我真的希望这可以帮助某人，因为我根本找不到任何东西。请问我问题，在下面的评论部分告诉我可以做些什么，或者只是我可以简化代码的简单方法。我感谢您的帮助和建设性的批评。谢谢，祝您帆布愉快！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句