加载字体后Javascript画布绘制文本_Javascript_Canvas_Fonts

加载字体后Javascript画布绘制文本

javascript canvas fonts

加载字体后Javascript画布绘制文本,javascript,canvas,fonts,Javascript,Canvas,Fonts,我正在尝试使用一个简单的脚本在一个标志上绘制文本。除了没有加载字体外，它工作正常我尝试在本地和从web加载字体，但这两种方式在我的服务器上都不起作用但是，代码在上运行良好我认为这与字体加载不正确或太晚有关。确保正确加载字体的最佳方法是什么 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css

我正在尝试使用一个简单的脚本在一个标志上绘制文本。除了没有加载字体外，它工作正常

我尝试在本地和从web加载字体，但这两种方式在我的服务器上都不起作用

但是，代码在上运行良好

我认为这与字体加载不正确或太晚有关。确保正确加载字体的最佳方法是什么

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
<style>body { font-family: Ubuntu, sans-serif; }</style>
</head>
<body>

<canvas style="border-radius: 100px;" id="myCanvas" width="200" height="200">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var size = 200
var textSize=size * 0.55;
var countryCode = "nl";
var text = "123";

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var img = new Image;
img.onload = function(){
  ctx.drawImage(img,-1,-1,size,size); // removes the 1px border the flags sometimes have
  ctx.font = textSize+"px Ubuntu";
  ctx.textAlign="center";
  ctx.fillStyle = "#260C4D";
  ctx.fillText(text,size/2,size/2 + textSize / 2.85);
};
img.src = "http://www.geonames.org/flags/x/"+countryCode+".gif";
</script>

</body>
</html>


正文{字体系列：Ubuntu，无衬线；}
您的浏览器不支持HTML5画布标记。
函数getParameterByName（名称、url）{
如果（！url）url=window.location.href；
name=name.replace（/[\[\]]/g，\\$&）；
var regex=new RegExp（“[？&]”+name+”（=（[^&#]*）和|#|$），
结果=regex.exec（url）；
如果（！results）返回null；
如果（！results[2]）返回“”；
返回组件（结果[2]。替换（/\+/g，”）；
}
变量大小=200
var textSize=大小*0.55；
var countryCode=“nl”；
var text=“123”；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=新图像；
img.onload=函数（）{
drawImage（img，-1，-1，size，size）；//删除标志有时具有的1px边框
ctx.font=textSize+“px Ubuntu”；
ctx.textAlign=“中心”；
ctx.fillStyle=“#260C4D”；
ctx.fillText（text，size/2，size/2+textSize/2.85）；
};
img.src=”http://www.geonames.org/flags/x/“+countryCode+”.gif”；

我真的很想投票以重复的方式接近，但由于您处于特殊情况下，我仍将发布此答案，这可能不是最好的答案

您正在使用

元素加载字体，因此一种方法是使用其

onload

事件处理程序。这种方法的问题是字体可能被缓存，并且加载事件可能在到达脚本声明之前就已经触发了

因此，您可以使用

href+'&'+new Date（）.getTime（）

技巧向服务器发出新请求，也可以从DOM中删除

，然后重新发送。这样，即使使用了缓存版本，其加载事件也应该再次触发。（请注意，我只在最新的FF和Chrome上测试了它，所以它可能无法在其他浏览器中工作）

var link=document.querySelector（'link'）；
link.onload=函数（）{
log.textContent='正在加载图像…'；
变量大小=200
var textSize=大小*0.55；
var countryCode=“nl”；
var text=“123”；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=新图像；
img.onload=函数（）{
log.textContent=''；
drawImage（img，-1，-1，size，size）；//删除标志有时具有的1px边框
ctx.font=textSize+“px Ubuntu”；
ctx.textAlign=“中心”；
ctx.fillStyle=“#260C4D”；
ctx.fillText（text，size/2，size/2+textSize/2.85）；
};
img.src=”http://lorempixel.com/200/200";
}
//如果它在缓存中，我们似乎必须将其从DOM中删除并重新插入
link.parentNode.removeChild（link）；
document.head.appendChild（链接）

正文{
字体系列：Ubuntu，无衬线；
}


正在加载字体

当您的canvas JS代码生效时，是什么让您认为字体已经可用？我没有看到任何代码检查字体是否下载/解析/附加到图形上下文…或使用，这是一个垫片，而字体加载API最终被采用到HTML5 web API集中。