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

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

查了资料得知,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. Maven Compilation error [package org.testng.annotations does not exist]

    背景 在执行mvn test的时候,提示package org.testng.annotations does not exist 解决办法 Open pom.xml file. Go to &quo ...

  2. Kindeditor编辑器上传附件,自动获取文件名显示。

    大部分在线编辑器在上传附件之后都是会以路径的形式显示出来很不友好.类似这样..怎么样显示成这样用户上传的原始文件名呢.就是这样.是不是看着很友好. kindeditor编辑器上传文件是已插件的形式调用 ...

  3. Java并发之ReentrantLock详解

    一.入题 ReentrantLock是Java并发包中互斥锁,它有公平锁和非公平锁两种实现方式,以lock()为例,其使用方式为: ReentrantLock takeLock = new Reent ...

  4. Promise之你看得懂的Promise

    本文由作者陈旭锋(任职网易考拉)授权网易云社区发布. Promise源码详解 学习知识要善于思考,思考,再思考. -- 爱因斯坦 1.回调地狱 曾几何时,我们的代码是这样的,为了拿到回调的结果,不得不 ...

  5. ClamAV学习【9】——cvd文件解析及cli_untgz函数浏览

    这个cli_untgz函数,是用来解压CVD文件的. 那么,就刚先搞清楚CVD文件的功能作用.下了源码,我们会发现,没有前面提到的*.mdb或者*.hbd等病毒签名文件.原因就是,那些文件都是由CVD ...

  6. 比较有用的php代码片段

    一 从网页中提取关键词 $meta = get_meta_tags('http://www.emoticode.net/'); $keywords = $meta['keywords']; // Sp ...

  7. 2018-2019-2 20165219《网络对抗技术》Exp2 后门原理与实践

    2018-2019-2 20165219<网络对抗技术>Exp2 后门原理与实践 实验内容 使用netcat获取主机操作Shell,cron启动 使用Socat获取主机操作Shell, 任 ...

  8. “全栈2019”Java异常第八章:throw关键字详解

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

  9. html实现时间输入框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 0基础浅谈反射型xss(2)

    0x1:回顾前文疑惑“先闭合,在构造” 上一篇,我们说到了xss的一个触发精髓,“先闭合,在构造”,对于前面的先闭合,我们来简单的解释一下:   首先说,为什么要闭合? 因为HTML标签都是成对出现的 ...