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

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

查了资料得知,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. 神器与经典--DMVsinSQLServer

    前言: 在不经意间发现这个SQL,正能量瞬间饱满,赶紧向周边的人分享,私藏是罪过啊! 请复制粘贴然后F5,经典无须多说! /************************************** ...

  2. java项目 远程debug

    AVA项目无法像PHP那样可以随时修改文件内容进行调试,调试可以借助eclipse,本地代码的话很容易在本地debug,但如果代码已经打包部署在linux上呢?可以进行远程debug   很简单,只需 ...

  3. 3.C#WebAPI设置路由和参数2

    1.上面已经教大家如何修改全局路由了,那么修改完后我们在post请求的要这样使用,其中model模型我就默认你应该已经建好了,没有创建的话请看上一部分 Post方法的参数,如果提交的请求体需要是pho ...

  4. C# SQLite 数据库

    数据库 Oracle.Oracle的应用,主要在传统行业的数据化业务中,比如:银行.金融这样的对可用性.健壮性.安全性.实时性要求极高的业务 MS SQL Server.windows生态系统的产品, ...

  5. ANE-调用原生组件横屏定位问题

    当我们的应用是横的时候,利用ANE调用原生组件如果处理不当,掉出来的组件会是竖的.那么我么要怎么做才能免去自己手动旋转组件这个破事呢.其实很简单 webView = [[UIWebView alloc ...

  6. Web Api 内部数据思考 和 利用http缓存优化 Api

    在上篇<Web Api 端点设计 与 Oauth>后,接着我们思考Web Api 的内部数据: 其他文章:<API接口安全加强设计方法> 第一  实际使用应该返回怎样的数据 ? ...

  7. 任意模数NTT和FFT的玄学优化学习笔记

    本来一直都是写\(7\)次的\(MTT\)的--然后被\(shadowice\)巨巨调教了一通之后只好去学一下\(4\)次的了-- 简单来说就是我们现在需要处理一类模数不为\(NTT\)模数的情况 这 ...

  8. redis5.0.4-cluster集群搭建及jedis客户端操作

    一.去官网下载redis5.0 https://redis.io/download 然后解压安装 $ .tar.gz $ cd redis- $ make 二.准备配置文件 打开redis-5.0.4 ...

  9. mangodb的存储

    mongodb基本命令 mongo #进入mongo命令行show dbs #查看所有数据库 use tutorial #切换到名为tutorial的数据库 show collections #查看数 ...

  10. 常用的PHP超全局变量$_SERVER 收集整理

    传送带:https://www.cnblogs.com/rendd/p/6182918.html