Ist es möglich, Text innerhalb <canvas> zu skalieren, ohne es nach Bildschirmgröße zu zerlegen?

Jemand neu zu Codierung und zum ersten Mal Poster. Ich habe ein Buch auf Leinwand bearbeitet und beschlossen, eine einfache "Knopf" -Seite zu erstellen, die im Wesentlichen ein zufälliges "Wahres" oder "Falsches" hervorbringt.Ist es möglich, Text innerhalb <canvas> zu skalieren, ohne es nach Bildschirmgröße zu zerlegen?

Ich setze meine canvas.width/height an die des Innenfensters. Alles ist nahtlos, da ich ein Größenänderungs-Ereignis außer dem Text habe, da es statisch bleibt. Ich weiß, dass ich es in Abhängigkeit von der Auflösung des Bildschirms einstellen kann, aber wie gesagt, ich suche nach etwas komplett Seamless, wenn ich das Fenster so skaliere, dass der Text zentriert zum "Knopf" steht und damit skaliert. Ich habe versucht, mit context.scale ohne Erfolg zu spielen. Ist es möglich?

window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; createPage(); }, false); 
 

 
var canvas = document.getElementById("draw"); 
 

 
var context= canvas.getContext("2d"); 
 

 
function createCircle(){ 
 
context.beginPath(); // is this doing anything? it was working before i used it 
 
context.arc(canvas.width/2,canvas.height/2, canvas.width*(.09),0,360,false); 
 
context.fillStyle="white"; 
 
context.fill(); 
 
//text    
 
context.fillStyle="black"; 
 
context.font="bold 1em sans-serif"; 
 
context.textBaseline="middle"; 
 
//little messy here trying to center the text 
 
context.fillText("PUSH", canvas.width*(.44), canvas.height/2); 
 
} 
 

 

 
function createPage(){ 
 
canvas.width = window.innerWidth; canvas.height = window.innerHeight; 
 
//blue 
 
context.fillStyle ="#002db3"; 
 
context.fillRect(0,0, canvas.width, canvas.height); 
 
//red 
 
context.fillStyle ="#cc0000"; 
 
context.fillRect(0,0, canvas.width, canvas.height*(0.5)); 
 
//circle 
 
createCircle(); 
 
} 
 

 
//flash white,setTimeout(yes/no) 
 
function hopeless(){ 
 
    context.fillStyle="green"; 
 
    context.fillRect(0,0, canvas.width, canvas.height); 
 
    context.fillStyle="black"; 
 
context.font="bold 1em sans-serif"; 
 
context.textBaseline="middle"; 
 
context.fillText("NO ALL IS LOST", canvas.width*(.3), canvas.height/2); 
 
    setTimeout(createPage,1000); 
 
} 
 

 
function hope(){ 
 
    context.fillStyle="blue"; 
 
    context.fillRect(0,0, canvas.width, canvas.height); 
 
    context.fillStyle="black"; 
 
context.font="bold 1em sans-serif"; 
 
context.textBaseline="middle"; 
 
context.fillText("YES THERE IS HOPE YET", canvas.width*(.2), canvas.height/2); 
 
    setTimeout(createPage,1000);  
 
} 
 

 
    
 
function yesOrNo(){ 
 
    if(Math.random()<.50){ 
 
    context.fillStyle="white"; 
 
    context.fillRect(0,0, canvas.width, canvas.height); 
 
    setTimeout(hopeless,100); 
 
    
 
    
 
    }else{ 
 
    context.fillStyle="white"; 
 
    context.fillRect(0,0, canvas.width, canvas.height); 
 
    setTimeout(hope,100); 
 
    
 
    
 
    } 
 
} 
 
createPage(); 
 
canvas.addEventListener("click",yesOrNo);

<html > 
 
<head > 
 
<title>Page Title</title> 
 
    <style> 
 
    canvas { 
 
     border: 1px solid black; 
 
    } 
 
    </style> 
 
</head> 
 
<body > 
 

 
    <canvas id="draw" ></canvas> 
 
</body> 
 
</html>

dankt allen!

Quelle

2017-01-31 creekjohnson

Wie [diese] (https://stackoverflow.com/questions/17627893/use-javascript-to-get- Maximum-Schriftgröße-in-Leinwand/17631567 # 17631567)? – K3N

ändern

context.fillText("PUSH", canvas.width*(.44), canvas.height/2);

zu:

var btnText = "PUSH"; 
var btnTextSize = context.measureText(btnText); 
var textX = (canvas.width/2) - (btnTextSize.width/2); 
var textY = (canvas.height/2); 
context.fillText(btnText, textX, textY);

MeasureText API Docs

Quelle

2017-01-31 03:07:13 Jack

Danke @Jack, das war eine sehr einfache, einfache Lösung zum Zentrieren. Kennen Sie etwas, wenn Sie den Text skalieren, wenn Sie die Größe des Fensters ändern? Danke noch einmal! – creekjohnson

Ist es möglich, Text innerhalb <canvas> zu skalieren, ohne es nach Bildschirmgröße zu zerlegen?

Antwort

Verwandte Themen