Javascript Leinwand zeichnen Text nach Laden Schriftart

Ich versuche, Text auf eine Flagge mit einem einfachen Skript zu zeichnen. Es funktioniert gut, außer dass die Schriftart nicht geladen wird.Javascript Leinwand zeichnen Text nach Laden Schriftart

Ich habe versucht, die Schriftart lokal und aus dem Internet zu laden, aber beide funktionieren nicht auf meinem Server.

jedoch der Code läuft gut auf w3 schools tryit editor

ich denke, es mit der Schrift nicht korrekt geladen zu tun hat, ist oder zu spät. Was ist der beste Weg, um sicherzustellen, dass die Schriftart korrekt geladen ist?

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

Quelle

2016-06-06 p.streef

was denken lassen Sie die Schrift schon, wenn in Ihrer Leinwand JS-Code Tritte vorhanden ist? Ich sehe keinen Code, der überprüft, um sicherzustellen, dass die Schriftart sogar heruntergeladen/analysiert/an den Grafikkontext angehängt wird ...? –

Ich bin wirklich zu stimmen versucht zu schließen, wie zu this Q/A duplizieren, aber da Sie in einem bestimmten Fall sind, werde ich immer noch diese Antwort veröffentlichen, die nicht das beste sein kann.

Sie laden Ihre Schriftart mit einem <link> Element, so ist eine Möglichkeit, seine onload Event-Handler zu verwenden. Das Problem bei diesem Ansatz besteht darin, dass die Schriftart möglicherweise zwischengespeichert wird und das Load-Ereignis möglicherweise ausgelöst wurde, bevor es die Skriptdeklarationen erreicht.

Sie können also den href +'&'+ new Date().getTime() Trick verwenden, um eine neue Anfrage an den Server zu senden, oder Sie können die <link> aus dem DOM entfernen und neu anhängen. Auf diese Weise sollte das Ladeereignis erneut ausgelöst werden, selbst wenn die zwischengespeicherte Version verwendet wird. (Beachten Sie, dass ich es nur auf dem neuesten FF und Chrome getestet habe, so dass es in anderen Browsern möglicherweise nicht funktioniert).

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>

Quelle

2016-06-06 12:29:40 Kaiido

oder verwenden Sie https://github.com/typekit/webfontloader, ein Shim, während die Font-Lade-API zur Übernahme in den HTML5-Web-API-Satz fertiggestellt ist. –

Javascript Leinwand zeichnen Text nach Laden Schriftart

Antwort

Verwandte Themen