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); 如上所示,直接 ...
随机推荐
- Canny边缘检测算法原理及其VC实现详解(一)
转自:http://blog.csdn.net/likezhaobin/article/details/6892176 图象的边缘是指图象局部区域亮度变化显著的部分,该区域的灰度剖面一般可以看作是一个 ...
- Hdu5181 numbers
numbers Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 196608/196608 K (Java/Others)Total ...
- laravel调试神器tinker
一直以来,想调试框架中的某些东西,如想知道 Elpquent 的 create 方法返回值是个什么东西, 以前的话,应该就是在 create 方法调用之后,使用 dd 或者 var_dump 之类的函 ...
- linux shell 通配符
http://note.youdao.com/noteshare?id=4b6bc019e055c897c6dfb81fe2c17756
- 11.UiAutomator 相关JAVA知识
一.封装方法与模块化用例 1.方法: 在JAVA中,方法就好比日常生活中的一个动作,由动作组合成一系列完整的操作. 方法结构: 方法修饰符 方法返回值类型 方法名 { 方法体 } 比如: public ...
- MSBuild问题积累
我想要当属性ConfigurationType定义为StaticLibrary时,将其重新定义为StaticLibrary,按照以下来做,实现不了. <ConfigurationType> ...
- div 当高度较小时指定高度,当高度较大时自适应
在该元素或标签的样式中加入:{min-height:500px;height:auto;},其中min-height:是最小高度,auto是自适应内容.
- 使用git拉取github上的项目
一. 安装Git 去Git官网,下载安装包,一路点next,默认安装. 安装之后,在空白处右键,菜单显示有 Git GUI Here 和 Git Bash Here ,表示Git安装成功. 二. 配置 ...
- Android 加载网络图片设置到ImageView
下载图片后显示在ImageView中 //1.定义全局变量 private Handler handler; private String image_url; private Bitmap bitm ...
- JVM调优总结:一些概念
数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型.基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变量保存引用值.“引用值”代表了某个对象的引用,而不是对象本身, ...