本文摘自PHP中文网,作者不言,侵删。
使用HTML5canvas绘制文字的方法:首先创建相应的HTML示例文件;然后通过fillText方法实现在画布上绘制填色的文本即可。
如果要使用HTML5 Canvas绘制文字,那么需要使用到画布上下文的fillText()方法。下面我们来看具体的内容。
我们先来看具体的示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title ></ title >
< meta charset = "utf-8" />
< script type = "text/javascript" >
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var context = canvas.getContext('2d');
context.font = 'normal 18pt "楷体"';
context.fillText('Hello HTML Canvas World!', 60, 200);
}
</ script >
</ head >
< body onload = "draw()" style = "background-color:#D0D0D0;" >
< canvas id = "SimpleCanvas" width = "640" height = "480" style = "background-color:#FFFFFF;" ></ canvas >
< div >Canvas Demo</ div >
</ body >
</ html >
|
说明:
下面的代码是获取canvas对象并获取上下文。
1 2 3 4 5 | var canvas = document.getElementById('SimpleCanvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var context = canvas.getContext('2d');
|
下面是绘制字符的代码。指定要在font属性中绘制的字符的字体信息。使用fillText()方法在画布上绘制一个字符串。作为第一个参数绘制的字符串,绘图开始的X坐标和Y坐标被赋予第二个和第三个参数。
1 2 | context.font = 'normal 18pt "楷体"';
context.fillText('Hello HTML Canvas World!', 60, 200);
|
运行结果
阅读剩余部分
相关阅读 >>
h5+js实现本地文件读取和写入
zip压缩和解压技术在HTML5中的应用的代码案例(图)
HTML5 source type有什么用处?HTML5 source标签的详细介绍
用HTML5实现桌面提醒功能的一个实例代码
详细介绍精选HTML5/css3动画应用源码分享
HTML5的geolocation地理位置定位api使用方法详解
极客学院HTML5新特性基础视频课件源码
HTML5单页面手势滑屏切换如何实现
canvas橡皮筋式线条绘图的方法介绍(代码示例)
HTML5无刷新改变当前url
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何使用HTML5 canvas绘制文字