HTML5 draws text in canvas with renderings-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 draws text in canvas with renderings

PHPz

May 16, 2016 pm 03:47 PM

canvas html5 draw text

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>

Copy after login

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 of this Website

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