使用HTML5绘制实体和空心文本代码实例
本章节介绍一下如何利用html5的canvas标签来绘制空心文本和实心文本。
所使用的方法也比较简单，如下:
|
1
2
|
context.fillText()
context.strokeText()
|
下面就是完整的实现此功能的代码实例:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
" utf-8"
>
<
title
>蚂蚁部落</
title
>
<
style
type
=
"text/css"
>
#tCanvas{
border:black 1px solid;
}
</
style
>
<
script
type
=
"text/javascript"
>
function pageLoaded(){
//获取canvas对象的引用,注意tCanvas名字必须和下面body里面的id相同
var canvas=document.getElementById('tCanvas');
//获取该canvas的2D绘图环境
var context = canvas.getContext('2d');
//绘制代码将出现在这里
//绘制文本
context.fillText('antzone is good',100,40);
//修改字体
context.font='20px Arial';
context.fillText('I love antzone',100,100);
//绘制空心的文本
context.font='36px 隶书';
context.strokeText('蚂蚁部落欢迎您',100,200);
}
window.onload=function(){
pageLoaded()
}
</
script
>
</
head
>
<
body
>
<
canvas
width
=
"500"
height
=
"300"
id
=
"tCanvas"
>浏览器不支持</
canvas
>
</
body
>
</
html
>
|
上面的代码实现了我们的要求，代码比较简单，就是使用固有的方法和属性，对字体相关属性就行设置，然后利用各自的方法进行绘制即可，上面带有比较完善的注释，如有任何问题可以跟帖留言。
原文发布时间为：2017-2-19
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
原文链接：使用HTML5绘制实体和空心文本代码实例
