html5显示字母的值,使用HTML5 Canvas API控制字体的显示与渲染的方法
今天我们开始征战一个全新的内容——HTML5 Canvas的文本API!要知道,艺术家通常同时也是一个书法家,所以我们要学习写字,而且是写出漂亮的字。是不是很有意思?
好了,先预告一下Canvas 文本API有哪些。
属性描述
font设置或返回文本内容的当前字体属性
textAlign设置或返回文本内容的当前对其方式
textBaseline设置或返回在绘制文本时使用的当前文本基线
方法描述
fillText()在画布上绘制“被填充的”文本
strokeText()在画布上绘制文本(无填充)
measureText()返回包含指定文本宽度的对象
看了上面的表格,相信童鞋们以及有了大概的认识。这里,我们先说文本的显示与渲染,用到了font,fillText()与strokeText()。
基本文本显示
在Canvas上使用文本,必须得先知道:Canvas上的文本不能使用CSS样式,虽然font属性与CSS的属性相似,但是却不能够交换使用。
显示文本三步走战略:
1.使用font设置字体。
2.使用fillStyle设置字体颜色。
3.使用fillText()方法显示字体。
这里的font属性可以不指定,如果没有指定字体,则默认自动使用 10px 无衬线体。
下面的代码简单显示了一段文本
JavaScript Code复制内容到剪贴板
基本文本显示
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
你的浏览器居然不支持Canvas?!赶快换一个吧!!
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
//1. 使用`font`设置字体。
context.font = "50px serif";
//2. 使用`fillStyle`设置字体颜色。
context.fillStyle = "#00AAAA";
//3. 使用`fillText()`方法显示字体。
context.fillText("《CANVAS--Draw on the Web》",50,300);
};
运行结果:
设置文本字体font
在Canvas中设置字体样式非常的容易,font属性与CSS的设置字体格式是一样的,因此只需通过把与CSS兼容的字符串应用到font属性即可。可以设置字体的样式、字体的变体、字体的粗细、字号和行高、字体外观等。
基本格式如下。
CSS Code复制内容到剪贴板
context.font =
"[font-style] [font-variant] [font-weight]
[font-size/line-height] [font-family]"
以上五个参数均可缺省,各个参数间用逗号隔开。
提示:参数用中括号[]包裹起来表示可以缺省。
下面一一来介绍一下这些参数值的意义。
font-style
font-style 属性定义字体的风格。
值描述
normal默认值。浏览器显示一个标准的字体样式。
italic浏览器会显示一个斜体的字体样式。
oblique浏览器会显示一个斜体的字体样式。
后两者通常情况下看上去是没啥区别的。但是获取倾斜效果的方法并不同。italic是使用字体库中的斜体字,通常一个字体库是拥有该字体的斜体形式和粗体形式。oblique是直接将字倾斜,如果一个字体库没有斜体字那么就不能使用italic,想要获取倾斜字体只能使用oblique。
font-variant
font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
值描述
normal默认值。浏览器显示一个标准的字体样式。
small-caps浏览器会显示小型大写字母的字体。
看下面的一张图片就知道这属性啥意思啦。
就是这样,上面一行是使用的默认值normal,下面一行使用的是small-caps。效果就是,原本大写的英文字母不变,小写的英文字母变成大写,但是大小不变。
font-weight
font-weight 属性设置文本的粗细。
值描述
normal默认值。浏览器显示一个标准的字体样式。
bold定义粗体字符。
bolder定义更粗的字符。
lighter定义更细的字符。
100-900之间的值定义由粗到细的字符。400等同于normal,而700等同于bold。
font-size
font-size 属性可设置字体的尺寸。
值描述
xx-samll最小字体
x-small较小字体
samll小字体。
medium缺省值。
large大字体。
x-large较大字体。
xx-large较大字体。
任意数值单位px,代表字号值
line-height
line-height 属性设置行间的距离(行高)。不允许使用负值
font-family
font-family 规定元素的字体系列。
使用@font-face自定义字体
HTML5支持常用字体,如果没有可以使用@font-face扩展字体。但是并不建议使用。
@font-face 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。目前支持加载EOT与TTF文件。
示例:代码过长,略XD
2016324112305009.jpg (850×500)
我这里下载的字体库只有A-Z这26个大写英文字母,所以遇到小写的自动转大写,遇到汉字或者数字它指定用星星符号代替。使用了CSS3中的@font-face即可自定义字体,是不是非常的酷。
文本渲染
同绘制矩形一样,这里“绘制”文本也给出了两种方法——fillText()与strokeText()。之所以说一样,因为这两个方法也可以通过fillStyle与strokeStyle设置对应的属性,之前说过的颜色填充、渐变填充、甚至是图案填充都是可以的。
fillText()与strokeText()的参数表是一样的,接受4个参数,分别是String,x,y与maxlen,其中String是指要显示的字符串,之后x与y是指显示的坐标,最后一个maxlen是可以缺省的数值型参数,代表显示的最大宽度,单位是像素。如果文本的长度超过了这个maxlen,Canvas就会将显示文本横向压缩。通常为了保证字体的美观,我们不设置maxlen。
即context.fillText(String,x,y,[maxlen])与context.strokeText(String,x,y,[maxlen])。
下面我们通过一个案例来看看文本渲染的效果。
JavaScript Code复制内容到剪贴板
文本渲染
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
你的浏览器居然不支持Canvas?!赶快换一个吧!!
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
context.beginPath();
context.font = "50px Verdana";
var gradient = context.createLinearGradient(0,0,800,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
context.fillStyle = gradient;
context.strokeStyle = "#00AAAA";
context.strokeText("airingursb.github.io", 50, 100);
context.fillText("airingursb.github.io", 50, 200);
//限制宽度
context.fillText("airingursb.github.io", 50, 300, 200);
context.beginPath();
var img = new Image();
img.src = "./images/bg1.jpg";
img.onload = function(){
var pattern = context.createPattern(img, "repeat");
context.fillStyle = pattern;
context.fillText("airingursb.github.io", 50, 400);
}
context.beginPath();
context.fillStyle = "#00AAAA";
context.fillText("Airing的博客,欢迎访问", 50, 500);
};
运行结果:
2016324112330747.jpg (850×500)
这里第一行使用的是一般颜色的strokeText()方法,第二行使用的是渐变色的fillText()方法,第三行设置了maxlen,第四行给字体填充的是纹理图案,第五行是广告……
html5显示字母的值,使用HTML5 Canvas API控制字体的显示与渲染的方法相关推荐
- java canvas 缩放图片_详解如何用HTML5 Canvas API控制图片的缩放变换
摘要:这篇HTML5栏目下的"详解如何用HTML5 Canvas API控制图片的缩放变换",介绍的技术点是"html5_canvas.canvas.Html5.控制图片 ...
- 微信小程序控制盒子显示隐藏_微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: 更多内容 更多> 2017-07-27 下面的是js中的主要代码: data: { shows ...
- html如何中心缩放图片,详解如何用HTML5 Canvas API控制图片的缩放变换
缩放变换scale(sx,sy)传入两个参数,分别是水平方向和垂直方向上对象的缩放倍数.例如context.scale(2,2)就是对图像放大两倍.其实,看上去简单,实际用起来还是有一些问题的.我们来 ...
- python编程lcd显示_PyQt5快速上手基础篇2-按钮控制LCD屏显示
前言 上一节我们完成了PyQt5开发环境搭建,本节开始我们正式进入PyQt5的世界,首先我给大家介绍下QT的信号与槽,然后利用这一特点完成点击按钮触发LCD屏显示功能. 一.基础知识 1. PyQt5 ...
- HTML5(五)——Canvas API
什么是 Canvas API? Canvas API(画布)提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式.可用于动画.游戏.图标.图片编辑等多 ...
- 关于H5中的Canvas API的探索
Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...
- javafx canvas_JavaFX技巧2:使用Canvas API进行清晰绘图
javafx canvas 最初开始使用Canvas API时,我注意到渲染代码的结果有些模糊,甚至更糟,不一致. 有些线条模糊,有些线条清晰. 来自Swing,我花了一些时间才意识到这是由JavaF ...
- JavaFX技巧2:使用Canvas API进行清晰绘图
当我最初开始使用Canvas API时,我注意到渲染代码的结果有些模糊,甚至更糟,不一致. 有些线条模糊,有些线条清晰. 来自Swing,我花了一些时间才意识到这是由JavaFX的坐标系引起的,该坐标 ...
- android下控制鼠标的显示和隐藏
通过hid usb接收鼠标信息,有光标显示,还没有找到好的办法控制鼠标的显示和隐藏,有下面的 帖子供参考: https://blog.csdn.net/lininglive/article/detai ...
最新文章
- 10.VMware View 4.6安装与部署-view clint和view for ipad连接测试
- 杭电oj1384--Intervals(差分约束)
- 生产管理要点:快执行、高品质、看板追踪!
- 【图像处理】透视变换 Perspective Transformation
- matlab求二元函数极值算法_最优化计算与matlab实现(3)——进退法
- 【CF 应用开发大赛】JEECG 基于代码生成器J2EE智能开发框架
- ByteTrack实时多目标跟踪
- linux 终端报错 Out of memory: Kill process[PID] [process name] score问题分析
- 鸿蒙系统的适配国产手机,真正的好消息!其它国产机,也在适配华为鸿蒙系统...
- 16.对极几何——介绍,立体视觉约束,条件_1
- python wxpython backend wxagg_在wxPython中使用draw()(复制轴)绘制不正确
- Ubuntu18.04 安装OpenCV
- 重磅干货!揭秘波士顿动力背后的专利技术
- android4.4 adb工具包,Android ADB工具
- Oracle卸载(无universal installer)
- PyHook3实现监控键盘鼠标操作
- 杨玲 201771010133《面向对象程序设计(java)》第十三周学习总结
- 湖北武汉施工员报考排给水和电气的施工方法建筑七大员报考
- try {}里有一个 return 语句,那么紧跟在这个 try 后的 finally {}里的 code 会不会被执行,什么时候被执行,在 return 前还是后?
- GitHub封了41万俄罗斯开发者账户,开源真的无国界?
热门文章
- 保存验证码的方法_selenium自动化测试:6.验证码处理
- 小米游戏手柄pc插件_在电视上玩电脑游戏
- lte盲重定向_LTE重选、切换、重定向的区别
- 关于mysql优化_关于MySQL优化的几点总结
- oracle备份能备份索引吗,ORACLE会使索引失效的条件
- c语言自动拷贝u盘文件,写了一个偷偷拷贝老师U盘所有文件的程序……蛋疼……………...
- Java集合迭代器原理图解_Java Iterator接口遍历单列集合迭代器原理详解
- java用内部类实现多重继承
- python捕获信号退出_Python捕获信号退出Python中的捕获Ctrl+C/SIGINT,优雅地退出多个进程,python,在,CtrlCSIGINT,并...
- iOS开发里面的4个层次