Home > Article > Web Front-end > HTML5 draws text in canvas with renderings

HTML5 draws text in canvas with renderings

PHPzOriginal: 2016-05-16 15:47:321546browse

This article mainly introduces how to draw text in canvas in HTML5. There are two methods to draw text in canvas, strokeText and fillText, which can be selected according to your needs.

1. Draw text

In the drawing environment, two methods are provided to draw text in canvas.

strokeText(text,x,y): Draw hollow text at (x,y).

fillText(text,x,y): Draw solid text at (x,y).

2. Draw text in canvas

The code is as follows:

<!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 , drawing effect

HTML5 draws text in canvas with renderings

The above is the entire content of this chapter. For more related tutorials, please visit Html5 video tutorial!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief overview of Html5 syntax and rulesNext article：A brief overview of Html5 syntax and rules

See more

HTML5 draws text in canvas with renderings

Related articles