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 中的@keyframes介绍
Sep 02 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 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
实用函数9
2007/11/08 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
微信支付开发维权通知实例
2016/07/12 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
python实现简单flappy bird
2018/12/24 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
区域销售经理岗位职责
2013/12/10 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
电视购物广告词
2014/03/19 职场文书
迎国庆演讲稿
2014/09/15 职场文书
房屋维修协议书范本
2014/09/25 职场文书
2014年少先队工作总结
2014/12/03 职场文书
社区节水倡议书
2015/04/29 职场文书
2015选调生工作总结
2015/07/24 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android