HTML5 在canvas中绘制文本附效果图


Posted in HTML / CSS onJune 23, 2014

一、绘制文本

在绘图环境中提供了两种方法在canvas中绘制文本。

strokeText(text,x,y) : 在(x,y)处绘制空心的文本。
fillText(text,x,y) : (x,y)处绘制实心的文本。

二、在canvas中绘制文本

复制代码
代码如下:

<!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('tCanvas');
//获取该canvas的2D绘图环境
var context = canvas.getContext('2d');
//绘制代码将出现在这里
//绘制文本
context.fillText('Welcome to DuJun Blog',100,40);
//修改字体
context.font = '20px Arial';
context.fillText('Welcome to DuJun Blog',100,100);
//绘制空心的文本
context.font = '36px 隶书';
context.strokeText('欢迎来到笃军的博客',100,200);
}
</script>
</head>
<body onload="pageLoaded();">
<canvas width = "500" height = "300" id = "tCanvas" style = "border:black 1px solid;">
<!--如果浏览器不支持则显示如下字体-->
提示:你的浏览器不支持<canvas>标签
</canvas>
</body>
</html>

三、绘制效果
HTML5 在canvas中绘制文本附效果图
HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 #HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 #HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 #HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 #HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 #HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 #HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 #HTML / CSS
You might like
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
深入解析Python中的上下文管理器
2016/06/28 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
python 创建一维的0向量实例
2019/12/02 Python
台湾生鲜宅配:大口市集
2017/10/14 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
构造方法和其他方法的区别
2016/04/26 面试题
初中科学教学反思
2014/01/21 职场文书
党支部公开承诺书
2014/03/28 职场文书
大学生村官考核材料
2014/05/23 职场文书
工程项目经理任命书
2014/06/05 职场文书
战略合作意向书
2014/07/29 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
大学生逃课检讨书
2015/05/04 职场文书
施工安全保证书
2015/05/09 职场文书
唐山大地震的观后感
2015/06/05 职场文书
高中物理教学反思
2016/02/19 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript
python中validators库的使用方法详解
2022/09/23 Python