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

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

查了资料得知,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. pycharm设置及激活码

    电脑上装了python2.7和python3.6两个版本(之前用的都是python3,因为要学习机器学习和深度学习了,机器学习的有些模块还没有更新到python3,于是乎又装了python2)为了能在 ...

  2. 窗口间传送数据wsprintf,WM_SETTEXT,SendMessage的理解

    对wsprintf  API函数的理解: int wsprintf ( LPTSTR lpOut, // pointer to buffer for output  LPCTSTR lpFmt, // ...

  3. VS中C#连接SQLite数据库处理器架构“x86”不匹配的问题

    原文链接 https://www.cnblogs.com/zhaoliankun/p/9088200.html 我的环境配置:windows 64,VS,SQLite(点击下载),System.Dat ...

  4. Python3.5 学习四

    装饰器 定义:本质是函数,装饰其他函数,即为其他函数添加附加功能的 原则: 1 不能修改被装饰函数的源代码 2 不能改变被装饰函数的调用方式(对于被装饰函数来说完全透明,不会受影响) 实现装饰器功能的 ...

  5. 那些令人敬佩的刚学OI的大佬

    我是萌新刚学OI,请问LCT怎么写常树最小啊 我是女生刚学OI,请问树链剖分哪里写挂了? 萌新求教,这棵SBT哪里有问题啊啊啊…… 刚学OI,请问可持久化非确定状态AC自动分块维护线段平衡仙人掌优化最 ...

  6. LOJ#6038. 「雅礼集训 2017 Day5」远行(LCT)

    题面 传送门 题解 要不是因为数组版的\(LCT\)跑得实在太慢我至于去学指针版的么--而且指针版的完全看不懂啊-- 首先有两个结论 1.与一个点距离最大的点为任意一条直径的两个端点之一 2.两棵树之 ...

  7. Error: Cannot find module 'gulp-sass'

    刚才首次启动ionic的时候,给我报了个这:Error: Cannot find module 'gulp-sass' 应该是缺少gulp-sass模块了,可又不敢贸然装,直接百度: stackove ...

  8. Nginx的反向代理和负载均衡

    1 Nginx的反向代理 1.1 什么是反向代理 正向代理 反向代理: 反向代理服务器是引用在服务端.决定哪台服务器提供服务. 1.2 反向代理的模拟 1.2.1 反向代理 应该有一个nginx服务器 ...

  9. SAE实践——用SVN命令行同步/提交代码

    1. 同步应用到本地 注:首次使用svn需要输入安全认证密码 在终端输入以下命令 svn co https://svn.sinaapp.com/nyhello nyhello替换为自己的应用名称. 用 ...

  10. 基础概念——令人迷惑的EOF

    EOF概念常常使人迷惑. 首先我们要理解并没有像EOF字符这样的东西. 进一步讲EOF是由内核检测到的一种条件. 应用程序在它接收到由read函数返回的零返回码时,它就会发现EOF条件. 对于磁盘文件 ...