HTML canvas fillText()与measureText()方法
HTML5 canvas fillText() 方法
实例
使用 fillText(),在画布上写文本 "你好!word!" 和 "我是w3c":
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
ctx.font="20px Georgia";ctx.fillText("你好!word!",10,50); ctx.font="30px Verdana";// 创建渐变 var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red");// 用渐变填色 ctx.fillStyle=gradient;ctx.fillText("我是w3c",10,90);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 fillText() 方法。
注释:IE8 或更早的浏览器表示呵呵。
定义和用法
fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
提示:请使用 font 属性来定义字体和字号,并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
JavaScript 语法:
context.fillText(text,x,y,maxWidth);
参数值
参数 |
描述 |
text |
规定在画布上输出的文本。 |
x |
开始绘制文本的 x 坐标位置(相对于画布)。 |
y |
开始绘制文本的 y 坐标位置(相对于画布)。 |
maxWidth |
可选。允许的最大文本宽度,以像素计。 |
HTML5 canvas measureText()方法
实例
在画布上输出文本之前,检查字体的宽度:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; var txt="你好,WPS!" ctx.fillText("width:" + ctx.measureText(txt).width,10,50) ctx.fillText(txt,10,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 measureText() 方法。
注释:IE8 或更早的浏览器表示呵呵。
定义和用法
measureText() 方法返回包含一个对象,该对象包含以像素计的指定字体宽度。
提示:如果您需要在文本向画布输出之前,就了解文本的宽度,那么请使用该方法。
JavaScript 语法:
context.measureText(text).width;
参数值
参数 |
描述 |
text |
要测量的文本。 |
原文地址:http://www.w3school.com.cn/tags/canvas_filltext.asp
http://www.w3school.com.cn/tags/canvas_measuretext.asp
HTML canvas fillText()与measureText()方法的更多相关文章
- canvas的measureText()方法
做一个小动画的时候遇到了个问题,就是在给文字应用渐变色的时候,不知怎么设置渐变色的区域. 渐变依赖于定义时的区域,超出这个区域只有纯色,而不是渐变色. 所以要取得文字的宽度. 查了资料得知,canva ...
- HTML5 canvas绘图基本使用方法
<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCon ...
- HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...
- 在小程序Canvas中使用measureText
有时候我们在使用Canvas绘制一段文本时,会需要通过measureText()方法获取文本的宽度,例如: 创建canvas标签 <canvas id="canvas"> ...
- A canvas fillText and strokeText example
A canvas fillText and strokeText example A canvas fillText and strokeText example
- HTML5 canvas文本属性与方法
文本属性和方法 font 设置或返回文本内容的当前字体属性 textAlign 设置或返回文本内容的当前对齐方式 start ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
- canvas绘制清晰的方法
很早就开始使用canvas,包括自己绘制各种图形,以及作为画布提供给诸如echarts,当canvas绘制细线条,特别是关于文字绘制会出现很模糊或者锯齿的感觉. <canvas ref=&quo ...
- Canvas画椭圆的方法
虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生 oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...
随机推荐
- nova-api源码分析(APP中用到的开源库)
源码版本:H版 1.paste.deploy 参考文章: http://pythonpaste.org/deploy/ http://blog.csdn.net/xiangmin2587/articl ...
- Hadoop 遇到的问题集
1. Mac 使用ssh命令无法成功 ssh localhost,但是可以ssh其他的 可能原因:ssh服务未启动 解决方法: 1.启动sshd服务: sudo launchctl load -w / ...
- == 和 equals,equals 与 hashcode,HashSet 和 HashMap,HashMap 和 Hashtable
一:== 和 equals == 比较引用的地址equals 比较引用的内容 (Object 类本身除外) String obj1 = new String("xyz"); Str ...
- AngularJs编辑器
问题:在使用过程中遇到的问题就是:angularJS绑定不上值.后来找到一种可以用的方式. html页 <div class="all"> <script typ ...
- 5W次单点修改,求最长的连续上升子序列 HDU 3308
题目大意:给你n个数,m个操作. 有两种操作: 1.U x y 将数组第x位变为y 2. Q x y 问数组第x位到第y位连续最长子序列的长度. 对于每次询问,输出连续最长子序列的长度 思路:用线段树 ...
- HttpClient 模拟登陆知乎
最近做爬虫相关工作,我们平时用HttpWebRequest 比较多,每一个Url都要创建一个HttpWebRequest实例, 而且有些网站验证比较复杂,在登陆及后续抓取数据的时候,每次请求需要把上次 ...
- 【BZOJ做题记录】07.07~?
在NOI一周前重开一个坑 最后更新时间:7.08 07:38 7.06 下午做的几道CQOI题: BZOJ1257: [CQOI2007]余数之和sum:把k mod i写成k-k/i*i然后分段求后 ...
- 【BZOJ】2120: 数颜色 带修改的莫队算法
[题意]给定n个数字,m次操作,每次询问区间不同数字的个数,或修改某个位置的数字.n,m<=10^4,ai<=10^6. [算法]带修改的莫队算法 [题解]对于询问(x,y,t),其中t是 ...
- 【leetcode 简单】第十八题 爬楼梯
假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: 有两 ...
- HDU 2094 产生冠军 (map容器)
title: 产生冠军 杭电 2094 tags: [acm,stl] 题目链接 Problem Description 有一群人,打乒乓球比赛,两两捉对撕杀,每两个人之间最多打一场比赛. 球赛的规则 ...