做一个小动画的时候遇到了个问题,就是在给文字应用渐变色的时候,不知怎么设置渐变色的区域。

渐变依赖于定义时的区域,超出这个区域只有纯色,而不是渐变色。 所以要取得文字的宽度。

查了资料得知,canvas有一个measureText()方法,它会返回一个TextMetrics对象,该对象只有一个width属性。

只需要把文本传入measureText()即可:

var texts = 'texts',
metrics = ctx.measureText(texts),
textsWidth = metrics.width,
gradient = ctx.createLinearGradient(10,5,textsWidth,5);
gradient.addColorStop(0,'#f00');
gradient.addColorStop(1,'#ff0');

canvas的measureText()方法的更多相关文章

  1. HTML canvas fillText()与measureText()方法

    HTML5 canvas fillText() 方法 实例 使用 fillText(),在画布上写文本 "你好!word!" 和 "我是w3c": JavaSc ...

  2. canvas主要属性和方法

    canvas主要属性和方法 方法                                   描述 save()                           保存当前环境的状态 res ...

  3. 安卓中Paint类和Canvas类的方法汇总

    Paint类的常用的方法 1.setColor方法,用于设置画笔的颜色,public void setColor(int color)//参数color为颜色值,也可以使用Color类定义的颜色Col ...

  4. javascript canvas 生成图片的方法

    javascript canvas 生成图片的方法 先生成base64格式的图片 然后ajax传到后台 写入服务器文件夹即可<pre><!DOCTYPE HTML><ht ...

  5. android: Canvas的drawArc()方法的几个误区

    绘制圆环很多时候会用到Canvas的drawArc方法, drawArc()方法的说明很简单: public void drawArc (RectF oval, float startAngle, f ...

  6. canvas常用属性方法由浅下沉

    首先引入<canvas></canvas>标签就不必说了. 其次就是得到canvas的2d环境了( var ctx = canvasDom.getContext('2d') ) ...

  7. 使用canvas元素-art方法绘制圆弧

    最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...

  8. canvas导出图片方法总结

    html代码 <canvas id="canvas" width="100" height="100" ></canvas ...

  9. html --- canvas --- javascript --- 绘图方法

    Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像. 如有疑问请访问链接:http://javascript.ruanyifeng.com/htmlapi/canvas.html < ...

随机推荐

  1. wp8.1 创建动态磁贴应用

    目前Windows Phone 8.1所支持磁贴像素大小有71x71.150x150和310x150,分为大中小三种模式,对于桌面磁贴微软提供的诸多模板http://msdn.microsoft.co ...

  2. java多线程 基础demo

    join()   让主进程等待子进程全部执行完 例子如下:   package mocker; public class TestThread5 extends Thread {      priva ...

  3. 对virtual虚方法的理解

    对virtual虚方法的理解 https://www.cnblogs.com/u3ddjw/p/6676485.html

  4. .NET中的异常处理机制(二)

    本文我们继续通过另一个例子来讲解在C#中如何捕捉异常并进行处理. 首先,我们新建一个控制台应用和一个Class Library Project.如下图所示. 图1 ConsoleUI应用 图2 Exc ...

  5. C#基础笔记(第二十二天)

    1.单例模式1)将构造函数私有化2)提供一个静态方法,返回一个对象3)创建一个单例 2.XML可扩展的标记语言 HTMLXML:存储数据 不是单独.net的东西,是一个单独的,JAVA什么的都也用不需 ...

  6. “全栈2019”Java多线程第十四章:线程与堆栈详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  7. aspx代码审计-1

    今天和大家分享一下aspx网站的代码审计,漏洞类型就是SQL注入和cookie欺骗. 本文作者:i春秋签约作家——非主流 今天看的cms名字叫做:XX星员工请假系统 我们首先看一下网站的目录结构: 其 ...

  8. MySQL之FOUND_ROWS()的用法

    SELECT FOUND_ROWS() 输出8(输出该表共有多少列)

  9. httpclient4.5 https请求 忽略身份验证

    import org.apache.commons.collections.MapUtils; import org.apache.http.*; import org.apache.http.cli ...

  10. 【vim】正常模式下的一般操作

    正常模式一般用于浏览文本,其实也就是通过键盘命令让光标在文本中跳来跳去,在任何模式下按一次或两次<Esc>会进入正常模式. 基本思想 vim对光标的定位操作非常精确和高效,这是它的一个非常 ...