La toile dessine du texte
La méthode fillText(string, x, y) de l'objet Context est utilisée pour dessiner du texte. Ses trois paramètres sont le contenu du texte, la coordonnée x et la coordonnée y du point de départ. Avant utilisation, vous devez utiliser la police pour définir la police, la taille et le style (la méthode d'écriture est similaire à l'attribut font de CSS). Semblable à cela, il existe la méthode StrokeText, qui est utilisée pour ajouter des mots creux. Autre remarque?: la méthode fillText ne prend pas en charge les sauts de ligne de texte, c'est-à-dire que tout le texte appara?t sur une seule ligne. Par conséquent, si vous souhaitez générer plusieurs lignes de texte, vous ne pouvez appeler la méthode fillText que plusieurs fois.
Le code est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>huatu</title>
<body>
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通過id獲得當前的Canvas對象
var canvasDom = document.getElementById("demoCanvas");
//通過Canvas Dom對象獲取Context的對象
var context = canvasDom.getContext("2d");
context.moveTo(200,200);
// 設置字體
context.font = "Bold 50px Arial";
// 設置對齊方式
context.textAlign = "left";
// 設置填充顏色
context.fillStyle = "#005600";
// 設置字體內容，以及在畫布上的位置
context.fillText("PHP中文網!", 10, 50);
// 繪制空心字
context.strokeText("ipnx.cn!", 10, 100);
</script>
</body>
</html>
