suchen

Heim >Web-Frontend >H5-Tutorial >HTML5 zeichnet Text mit Renderings im Canvas

HTML5 zeichnet Text mit Renderings im Canvas

PHPz
PHPzOriginal
2016-05-16 15:47:321567Durchsuche

In diesem Artikel wird hauptsächlich das Zeichnen von Text auf der Leinwand in HTML5 vorgestellt. Es gibt zwei Methoden zum Zeichnen von Text auf der Leinwand: StrokeText und FillText, die je nach Bedarf ausgewählt werden können.

1. Text zeichnen

In der Zeichenumgebung stehen zwei Methoden zum Zeichnen von Text auf der Leinwand zur Verfügung.

StrokeText(text,x,y): Zeichne leeren Text bei (x,y).

fillText(text,x,y): Zeichne festen Text bei (x,y).

2. Text auf Leinwand zeichnen

Der Code lautet wie folgt: 

<!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, Zeicheneffekt

HTML5 zeichnet Text mit Renderings im Canvas

Das Obige ist der gesamte Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter Html5-Video-Tutorial!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ein kurzer Überblick über die Syntax und Regeln von HTML5Nächster Artikel：Ein kurzer Überblick über die Syntax und Regeln von HTML5

In Verbindung stehende Artikel

Mehr sehen