recherche

Maison >interface Web >Tutoriel H5 >HTML5 dessine du texte dans le canevas avec des rendus

HTML5 dessine du texte dans le canevas avec des rendus

PHPz
PHPzoriginal
2016-05-16 15:47:321566parcourir

Cet article présente principalement comment dessiner du texte dans un canevas en HTML5. Il existe deux méthodes pour dessiner du texte dans un canevas, StrokeText et fillText, qui peuvent être sélectionnées en fonction de vos besoins.

1. Dessiner du texte

Dans l'environnement de dessin, deux méthodes sont proposées pour dessiner du texte dans le canevas.

StrokeText(text,x,y) : dessinez du texte creux en (x,y).

fillText(text,x,y) : dessinez du texte solide en (x,y).

2. Dessinez du texte dans le canevas

Le code est le suivant : 

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset = utf-8"> 
<title>HTML5</title> 
<script type="text/javascript" charset = "utf-8"> 
//这个函数将在页面完全加载后调用 
function pageLoaded() 
{ 
//获取canvas对象的引用,注意tCanvas名字必须和下面body里面的id相同 
var canvas = document.getElementById(&#39;tCanvas&#39;); 
//获取该canvas的2D绘图环境 
var context = canvas.getContext(&#39;2d&#39;); 
//绘制代码将出现在这里 
//绘制文本 
context.fillText(&#39;Welcome to DuJun Blog&#39;,100,40); 
//修改字体 
context.font = &#39;20px Arial&#39;; 
context.fillText(&#39;Welcome to DuJun Blog&#39;,100,100); 
//绘制空心的文本 
context.font = &#39;36px 隶书&#39;; 
context.strokeText(&#39;欢迎来到笃军的博客&#39;,100,200); 
} 
</script> 
</head> 
<body onload="pageLoaded();"> 
<canvas width = "500" height = "300" id = "tCanvas" style = "border:black 1px solid;"> 
<!--如果浏览器不支持则显示如下字体--> 
提示：你的浏览器不支持<canvas>标签 
</canvas> 
</body> 
</html>

3 , effet de dessin

HTML5 dessine du texte dans le canevas avec des rendus

Ce qui précède est l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter Tutoriel vidéo HTML5<.>!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Un bref aperçu de la syntaxe et des règles HTML5Article suivant：Un bref aperçu de la syntaxe et des règles HTML5

Articles Liés

Voir plus