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+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 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中使用Oracle数据库(4)
2006/10/09 PHP
PHP连接access数据库
2008/03/27 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
详解js的六大数据类型
2016/12/27 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
python多线程编程中的join函数使用心得
2014/09/02 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
python用户管理系统的实例讲解
2017/12/23 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
django用户登录和注销的实现方法
2018/07/16 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
股份合作协议书范本
2014/04/14 职场文书
世界读书日的活动方案
2014/08/20 职场文书
课外小组活动总结
2014/08/27 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
环卫工作个人总结
2015/03/04 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL