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

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

查了资料得知,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. Linux Guard Service - 进程分裂与脱离

    进程分裂更名 void set_ps_name(char *name) { prctl(PR_SET_NAME, name); } 修改进程长名称 备份进程环境变量空间 for (i = 1; i & ...

  2. Buffer Pool--SQL Server:Memory Manager 对象

    --=================================================================SELECT * FROM sys.sysperfinfoWHER ...

  3. solrconfig.xml配置详解

    solrconfig.xml配置文件主要定义了SOLR的一些处理规则,包括索引数据的存放位置,更新,删除,查询的一些规则配置. 可以在tomcat的安装路径下找到这个文件C:\Program File ...

  4. kv数据库对比总结

    集群型: hbase Cassandra scylladb redis类: redis + twemproxy codis 持久型: pika ssdb

  5. django drf CreateModelMixin和Serializer.validate_columun

    view demo class ValidateCodeSet(mixins.CreateModelMixin, viewsets.GenericViewSet): serializer_class ...

  6. 【OCP题库】最新CUUG OCP 12c 071考试题库(68题)

    68.(29-13)choose two: Which two statements are true? (Choose two.) A) DICTIONARY is a view that cont ...

  7. 源码编译安装MySQL-5.6/mysql-5.6.39------踩了无数坑,重装了十几次服务器才会的,不容易啊!

    1.切换到src目录 cd /usr/local/src/ 2. 下载mysql免编译二进制包 免编译的mysql二进制包5.6源码包: wget http://mirrors.163.com/mys ...

  8. [Objective-C语言教程]类和对象(24)

    Objective-C编程语言的主要目的是为C编程语言添加面向对象,类是Objective-C的核心特性,支持面向对象编程,通常称为用户定义类型. 类用于指定对象的形式,它将数据表示和方法组合在一起, ...

  9. java_I/O字节流

    I/O流(Stream) INPUT:输入流,从文件里读OUPUT:输出流,写内容到文件 IO流分为:字符流和字节流 字符流:处理纯文本文件. 字节流:处理可以所有文件. 测试字节输出流OuPut(写 ...

  10. Kettle 系列随笔

    1.Kettle导入数据到Hive 出现多余的几行全部是null值的情况 2.Kettle根据表输入的SQL脚本返回创建表的SQL脚本 3.Kettle 行列互换之——行转列(多列数据合并成一列变为多 ...