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()方法的更多相关文章

  1. canvas的measureText()方法

    做一个小动画的时候遇到了个问题,就是在给文字应用渐变色的时候,不知怎么设置渐变色的区域. 渐变依赖于定义时的区域,超出这个区域只有纯色,而不是渐变色. 所以要取得文字的宽度. 查了资料得知,canva ...

  2. HTML5 canvas绘图基本使用方法

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCon ...

  3. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

  4. 在小程序Canvas中使用measureText

    有时候我们在使用Canvas绘制一段文本时,会需要通过measureText()方法获取文本的宽度,例如: 创建canvas标签 <canvas id="canvas"> ...

  5. A canvas fillText and strokeText example

    A canvas fillText and strokeText example A canvas fillText and strokeText example

  6. HTML5 canvas文本属性与方法

    文本属性和方法 font                        设置或返回文本内容的当前字体属性 textAlign                设置或返回文本内容的当前对齐方式 start ...

  7. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  8. canvas绘制清晰的方法

    很早就开始使用canvas,包括自己绘制各种图形,以及作为画布提供给诸如echarts,当canvas绘制细线条,特别是关于文字绘制会出现很模糊或者锯齿的感觉. <canvas ref=&quo ...

  9. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

随机推荐

  1. CDOJ--1404

    原题链接:http://acm.uestc.edu.cn/problem.php?pid=1404 分析:定义dp[i][j]表示i位时最左边为j时的情况,那么dp[i][[j]可以由dp[i-1][ ...

  2. poj2373 Dividing the Path

    Dividing the Path Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5060   Accepted: 1782 ...

  3. 下载网页视频音频方法(djyeye为例)

    方法一: 三步操作: 选择media即可. m4a即为音频实际地址. 方法二: 方法三: 遨游浏览器 感谢知乎 https://www.zhihu.com/question/26938393

  4. 手脱FSG v1.33

    1.载入PEID FSG v1.33 (Eng) -> dulek/xt 2.载入OD,先F8跟一会 004103E3 > BE A4014000 mov esi,fsg1_33.0040 ...

  5. duilib 增加gif控件(基于gdi+,可控制播放暂停,自动设置大小)

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42502081 因为项目需要我需要给duilib增加一个gif控件,目前已 ...

  6. Hibernate学习(3)- *.hbm.xml详解

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-mapping PUBL ...

  7. 跟我一起写Makefile(五)

    使用变量———— 在Makefile中的定义的变量,就像是C/C++语言中的宏一样,他代表了一个文本字串,在Makefile中执行的时候其会自动原模原样地展开在所使用的地方.其与C/C++所不同的是, ...

  8. Maven手动添加依赖的jar文件到本地Maven仓库

    原文出处:https://www.iteblog.com/archives/646.html 寫得很好,轉走僅供學習,望諒解! Apache Maven,是一个软件(特别是Java软件)项目管理及自动 ...

  9. 树形dp的进阶 (一)

    ①树的重心的性质的运用 ②缩点以后寻找规律  树的直径! ③树形dp上的公式转换 ④和期望有关的树形dp + 一点排列组合的知识 ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ 一:Codeforces Round #364 ...

  10. 「七天自制PHP框架」应用:Model外键链接

    这里以行政区数据为例: 一级行政区数据范例: 二级行政区范例: 三级行政区范例: 在Model层建立三个Model class ProvinceModel extends Model{ public ...