communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

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("www.php.cn!", 10, 100);
</script>
</body>
</html>


Formation continue
||
<!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("www.php.cn!", 10, 100); </script> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492514 joue