Comment ajouter une bordure sur HTML5 Toile 'Text?

Question

Je peux dessiner du texte en utilisant le code ci-dessous,

myCanvas.fillStyle = "Red"; 
myCanvas.font = "30pt Arial"; 
myCanvas.fillText("Some Text", 10, 30); 

Mais je veux ajouter une bordure autour « du texte », des idées à ce sujet?

Answer 1

Utilisez strokeText() et strokeStyle. par exemple:

canvas = document.getElementById("myc"); 
 
context = canvas.getContext('2d'); 
 

 
context.fillStyle = 'red'; 
 
context.strokeStyle = 'black'; 
 

 
context.font = '20pt Verdana'; 
 
context.fillText('Some text', 50, 50); 
 
context.strokeText('Some text', 50, 50); 
 

 
context.fill(); 
 
context.stroke();

<canvas id="myc"></canvas>

Answer 2

Qu'en est-

myCanvas.style.border = "red 1px solid"; 

Answer 3

Nous pouvons utiliser méthode strokeStyle pour dessiner la frontière autour du texte ou d'un plan, et Nous pouvons utiliser lineWidth méthode pour définir la largeur de la ligne de course.

<script> 
    var canvas = document.getElementById('Canvas01'); 
    var ctx = canvas.getContext('2d'); 

    ctx.strokeStyle= "red"; //set the color of the stroke line 
    ctx.lineWidth = 3; //define the width of the stroke line 
    ctx.font = "italic bold 35pt Tahoma"; //set the font name and font size 
    ctx.strokeText("StackOverFlow",30,80); //draw the text 

</script> 
</body>