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

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

查了资料得知,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. web api 请求结果中页面显示的json字符串与json对象结果不一致

    我在前端调用这个api的时候也是百思不得其解,明明看到页面上的结果ID是不一样的,但是在js中使用的时候,却一直有重复ID的情况 后来才发现原来是long这个类型的原因,JavaScript中Numb ...

  2. 记录---IIS显示asp.net程序的具体错误

    原来IIS设置成显示单一的错误页面 但是最近的服务器页面报错,但是本地确实完好的:所以想着让服务器显示具体的报错 网上找到两种方法: 先说第一种有效的: 通过 web.config 配置 其实,上面在 ...

  3. C# 多线程task

    1.异步和多线程的区别?没什么太大区别.异步是目的,使用多线程实现.想想AJAX异步加载,不就是不想让浏览器界面卡住嘛,所以在程序中对于某些单独的操作,比如写日志,我们不想等它完成后再执行其它操作(因 ...

  4. iOS Png Crush 错误

    添加新的 png 图片到项目里的时候,出现错误 错误内容: while reading... pngcrush caught libpng error: cound not find file... ...

  5. pod-infrastructure:latest镜像下载失败

    报错一:image pull failed for registry.access.redhat.com/rhel7/pod-infrastructure:latest, this may be be ...

  6. 一次mysql调优过程

    由于经常被抓取文章内容,在此附上博客文章网址:,偶尔会更新某些出错的数据或文字,建议到我博客地址 :  --> 点击这里 前几天进行了一个数据库查询,比较缓慢,便查询了一下,在这里记录一下,方便 ...

  7. 1270: Wooden Sticks [贪心]

    点击打开链接 1270: Wooden Sticks [贪心] 时间限制: 1 Sec 内存限制: 128 MB 提交: 31 解决: 11 统计 题目描述 Lialosiu要制作木棍,给n根作为原料 ...

  8. 【Oracle 12c】最新CUUG OCP-071考试题库(58题)

    58.(16-1) choose the best answer: Examine the structure of the BOORSTRANSACTIONS table: Examine the ...

  9. 【OCP-12c】CUUG 071题库考试原题及答案解析(18)

    18.(8-7) choose twoWhich two statements are true regarding views? (Choose two.) A) A simple view in ...

  10. BZOJ 1412--狼和羊的故事(最小割)

    1412: [ZJOI2009]狼和羊的故事 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3316  Solved: 1664[Submit][St ...