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用@font-face实现自定义英文字体
Sep 23 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
css3带你实现3D转换效果
Feb 24 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正则表达式(regar expression)
2011/09/10 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
javascript的事件描述
2006/09/08 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
javascrit中undefined和null的区别详解
2019/04/07 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
简单理解Python中的装饰器
2015/07/31 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
python算法题 链表反转详解
2019/07/02 Python
使用npy转image图像并保存的实例
2020/07/01 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
保安自我鉴定范文
2013/12/08 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
家长会主持词开场白
2014/03/18 职场文书
《凡卡》教学反思
2014/04/09 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python