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

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

查了资料得知,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. Java ActiveMQ 讲解(一)理解JMS 和 ActiveMQ基本使用

    最近的项目中用到了mq,之前自己一直在码农一样的照葫芦画瓢.最近几天研究了下,把自己所有看下来的文档和了解总结一下. 一. 认识JMS 1.概述 对于JMS,百度百科,是这样介绍的:JMS即Java消 ...

  2. 支付宝PC网站接口对接

    PC网站支付接口,请参考支付宝官方文档:https://b.alipay.com/signing/productSet.htm?navKey=all 1.需要提供签约账号.商户密钥 2.代码实现: 支 ...

  3. awk中NF的使用

    统计机器中网络连接各个状态个数 netstat -a | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}'   一下子不明白$NF是什么意 ...

  4. Jenkins 使用 Build Flow 插件配置工作流任务依赖

    Jenkins 使用 Build Flow 插件配置工作流任务依赖 Jenkins 多任务依赖方式的配置方法目前可以通过MultiJob Project 或者Build Flow 或者Piplelin ...

  5. layou split 属性

    layou split:true -  显示侧分栏

  6. WPF显示Gif动画

    WPF的Image控件不能很好的支持.gif文件.解决办法有如下2种. 1使用MediaElement <MediaElement Source="file://D:\anim.gif ...

  7. pageadmin CMS网站建设教程:站点添加自定义字段

    首先看看pagedmin默认的站点设置都有什么,如下图: 这里只有一些最基本的参数设置,用过3.0版本或用过其他公司开发的cms的用户应该有这种体验,在站点设置中可以设置logo图片,备案号,底部内容 ...

  8. delphi 在字符串中输出单引号'

    在程序代码里,用单引号 引起来的两个单引号,经过编译后是一个单引号.'''ok''':编译后表示'ok';

  9. GitHub创建项目,保存代码。

    平时学习会写一些代码,虽然只是零零散散的功能,但是基本都是在一个项目下操作,偶尔会忘记代码编辑顺序.国庆这几天在家,想把GitHub用起来,实现自己代码的可追溯,可查询.学习本篇博客,你需要一点的Gi ...

  10. GCD介绍:Dispatch_source

    [转自:GCD介绍(三): Dispatch Sources] 何为Dispatch Sources 简单来说,dispatch source是一个监视某些类型事件的对象.当这些事件发生时,它自动将一 ...