Javascript canvas draw text после загрузки шрифта

Я пытаюсь нарисовать текст на флагом, используя простой скрипт. Он отлично работает, за исключением того, что Шрифт не загружается.Javascript canvas draw text после загрузки шрифта

Я попытался загрузить шрифт локально и из Интернета, но оба они не работают на моем сервере.

Однако код работает отлично на w3 schools tryit editor

Я думаю, что он должен делать с шрифт не загружен неправильно или слишком поздно. Каков наилучший способ убедиться, что шрифт загружен правильно?

<!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>

источник

2016-06-06 p.streef

, что заставляет вас думать, что шрифт уже доступны, когда ваш холст пинки JS код в? Я не вижу никакого кода, который проверяет, чтобы шрифт даже выполнял загрузку/разбор/прикрепление к графическому контексту ...? –

Я действительно соблазн голосовать, чтобы закрыть, как дубликат this Q/A, но так как вы в каждом конкретном случае, я по-прежнему отправлять этот ответ, который не может быть лучшим.

Вы загружаете свой шрифт с помощью элемента <link>, поэтому один из способов - использовать обработчик события onload. Проблема с этим подходом заключается в том, что шрифт может быть кэширован, и событие загрузки может быть запущено до того, как оно достигнет ваших объявлений сценариев.

Итак, вы можете использовать трюк href +'&'+ new Date().getTime(), чтобы сделать новый запрос на сервер, или вы можете удалить <link> из DOM и повторно использовать его. Таким образом, событие загрузки должно возобновиться, даже если используется кешированная версия. (Обратите внимание, что я тестировал его только на последних FF и Chrome, поэтому он может не работать в других браузерах).

var link = document.querySelector('link'); 
 
link.onload = function() { 
 
    log.textContent = 'loading image...'; 
 
    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() { 
 
    log.textContent=''; 
 
    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://lorempixel.com/200/200"; 
 
} 
 
// in case it's in the cache, it seems we have to remove it from the DOM and reinsert it 
 
link.parentNode.removeChild(link); 
 
document.head.appendChild(link)

body { 
 
    font-family: Ubuntu, sans-serif; 
 
}

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin"> 
 

 
<p id="log">loading font..</p> 
 
<canvas style="border-radius: 100px;" id="myCanvas" width="200" height="200"></canvas>

источник

2016-06-06 12:29:40 Kaiido

или использовать https://github.com/typekit/webfontloader, который является прокладкой, в то время как API загрузки шрифтов завершен для принятия в набор веб-API HTML5. –

Javascript canvas draw text после загрузки шрифта

ответ

Смежные вопросы