如何将自定义字体轻松放入HTML5 Canvas？ [英] How do I put custom fonts into HTML5 Canvas easily?
问题描述
在浏览问题时，我从未发现以上内容的明确答案。我想要一种适用于几乎所有平台的方法。因此，为了社区的利益，我想分享在使自定义字体在画布上工作方面的成功。我的主要问题是，确保所说字体正常工作的保证方法是什么？我尝试了多种方法，例如仅使用CSS样式表，但这要复杂得多。我找到的是以下内容：
When looking through the questions I never found a clear answer to the above. I wanted a method that worked with just about every platform. So for the benefit of the community, I thought I'd share my success in getting custom fonts to work in canvas. My main question was, What is a surefire way to get said fonts to work? I tried multiple methods such as just using a CSS stylesheet but it's a bit more complicated than that. Here's what I found:
推荐答案
我将在下面讨论我的代码。
首先，我的Javascript：
I'll discuss my code underneath. First off, My 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坐标和y坐标。 setTimeout（）; 延迟可能是必要的，以便使画布有时间加载字体。在我编写的测试程序中，虽然100ms几乎没有引起注意，但实际上延迟时间却非常短。
另一个关键部分是CSS样式表：
Allow me to explain whats going on here. I have a simple window.onload function so that the canvas exists before I try to get its Id and Context. Inside my text_handler() function, I have the font size and the font family defined in one line, as well as my font color (White because I have a black canvas). Then in the canvas I draw my message, and provide an x coordinate and a y coordinate. The setTimeout(); delay may be necessary in order to give the canvas time to load the font. In the test program I wrote, I actually got the delay time down really low, though 100ms is almost unnoticeable.
Another critical part of this is the CSS stylesheet:
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 作为自定义字体。
I have of course defined the font in the canvas, the body of the webpage, and a necessary hidden div. The div helps load the font. I have styles in order that the div remains invisible but it still does its job. For some reason, through my testing, I determined that the font-family style must be above the other styles in my div. Of course, you could use whatever you want. Also of course, I use @font-face for my custom font.
以下是HTML的外观：
Here's what the HTML looks like:
<body>
<div id="load">words</div> <!-- load font -->
<canvas id="canvas1" width="500px" height="500px"></canvas>
</body>
如上所述，在画布可以实现字体之前，必须先加载div字体。这就是为什么我里面有单词。
As explained above, the div is necessary to load the font before the canvas can implement it. That's why I have "words" inside it.
我真的希望这对某人有帮助，因为我根本找不到任何东西。请问我问题，在下面的评论部分告诉我可以做些什么，或者只是我可以简化代码的简单方法。感谢您的帮助和建设性的批评。谢谢，祝您画布愉快...
I really hope this helps someone out because I simply couldn't find anything on it. Please ask me questions, tell me what I could have done differently in the comment section below, or just simply ways I can simplify my code. I'd appreciate the help and constructive criticism. Thanks, and happy Canvas-ing...
这篇关于如何将自定义字体轻松放入HTML5 Canvas？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
