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

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

查了资料得知,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. LINQ to Entities 查询中的标准查询运算符

    投影和筛选方法 投影指的是转换的结果集到所需的窗体中的元素. 例如,可以从结果集中的每个对象投影所需的属性子集,可以投影一个属性并对其执行数学计算,也可以从结果集投影整个对象. 投影方法有 Selec ...

  2. IOC容器之Autofac

    讲到IOC容器,就必须提到DIP(依赖倒置原则). DIP是OOD(面向对象设计)的一个重要思想,在该原则上引申出了\IOC(控制反转)\DI(依赖注入)\IOC容器. 居然讲到IOC容器,当然我们要 ...

  3. UWP开发入门(八)——聊天窗口和ItemTemplateSelector

    我们平常用的最多的APP可能就是企鹅和微信了.有没有想过聊天窗口如何实现的?本篇我们将简单模拟一个聊天窗口. 聊天窗口大致上就是消息的一个集合列表.集合列表最常见的展现形式无非就是ListView.可 ...

  4. 【Map,HashMap,Vector,List】资料汇总

    深入学习HashMap实现原理 http://www.cnblogs.com/xwdreamer/archive/2012/06/03/2532832.html 深入学习Vector原理 http:/ ...

  5. TCP Server有两个套接字

     TCP服务器有一个特殊的套接字,欢迎运行在任意主机上的客户进程的某些初始接触. 三次握手期间,客户进程敲服务器的欢迎之门.该服务器"听到"敲门时,它将生成一个新的TCP套接字对 ...

  6. 总结day5 ---- ,字典的学习,增删改查,以及字典的嵌套, 赋值运算

    内容大纲: 一:字典的定义 二:字典的增加 >1:按照key增加,  无则增加,有则覆盖 >2:setdefault()  ,无则增加,有则不变 三:字典的删除 >1:pop()  ...

  7. leetcode-139-单词拆分(递归超时,动归解决)

    题目描述: 给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词. 说明: 拆分时可以重复使用字典中的单词. 你可以假设字 ...

  8. leetcode-849-到最近的人的最大距离

    题目描述: 在一排座位( seats)中,1 代表有人坐在座位上,0 代表座位上是空的. 至少有一个空座位,且至少有一人坐在座位上. 亚历克斯希望坐在一个能够使他与离他最近的人之间的距离达到最大化的座 ...

  9. Kotlin Eclipse 环境搭建

    Kotlin是JetBrains开发的基于JVM的语言.JetBrains是一家捷克的软件开发公司,该公司位于捷克的布拉格,研发了IntelliJ IDEA这款相对于Eclipse有较大改善的大名鼎鼎 ...

  10. Access to the path ‘’ is denied

    2019/4/29 问题:利用VS实现数据导出,出现Error:Access to the path 'F:\HPYMTotalCode\Web\dd\xmqjd.xls' is denied. 原因 ...