canvas的measureText()方法
做一个小动画的时候遇到了个问题,就是在给文字应用渐变色的时候,不知怎么设置渐变色的区域。
渐变依赖于定义时的区域,超出这个区域只有纯色,而不是渐变色。 所以要取得文字的宽度。
查了资料得知,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()方法的更多相关文章
- HTML canvas fillText()与measureText()方法
HTML5 canvas fillText() 方法 实例 使用 fillText(),在画布上写文本 "你好!word!" 和 "我是w3c": JavaSc ...
- canvas主要属性和方法
canvas主要属性和方法 方法 描述 save() 保存当前环境的状态 res ...
- 安卓中Paint类和Canvas类的方法汇总
Paint类的常用的方法 1.setColor方法,用于设置画笔的颜色,public void setColor(int color)//参数color为颜色值,也可以使用Color类定义的颜色Col ...
- javascript canvas 生成图片的方法
javascript canvas 生成图片的方法 先生成base64格式的图片 然后ajax传到后台 写入服务器文件夹即可<pre><!DOCTYPE HTML><ht ...
- android: Canvas的drawArc()方法的几个误区
绘制圆环很多时候会用到Canvas的drawArc方法, drawArc()方法的说明很简单: public void drawArc (RectF oval, float startAngle, f ...
- canvas常用属性方法由浅下沉
首先引入<canvas></canvas>标签就不必说了. 其次就是得到canvas的2d环境了( var ctx = canvasDom.getContext('2d') ) ...
- 使用canvas元素-art方法绘制圆弧
最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...
- canvas导出图片方法总结
html代码 <canvas id="canvas" width="100" height="100" ></canvas ...
- html --- canvas --- javascript --- 绘图方法
Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像. 如有疑问请访问链接:http://javascript.ruanyifeng.com/htmlapi/canvas.html < ...
随机推荐
- WebApi 插件式构建方案:重写的控制器获取工厂
body { border: 1px solid #ddd; outline: 1300px solid #fff; margin: 16px auto; } body .markdown-body ...
- mybatis 使用tips - 使用多个参数
执行如下命令: mvn -Dmybatis.generator.overwrite=true mybatis-generator:generate 可以使用mybatis generator myba ...
- 在jquery中怎么使用css类名和id来获取元素?
在jquery中,你可以很容易的使用CSS类名和id类获取元素. 例如: 1.ID:#id $('#idA')——选择id为idA的所有元素,不管元素的标签名如何. $('div#idA')——选择i ...
- .Net 图片缩略图上传通用方法
日常开发中,经常碰到图片上传的需求,尤其在商城系统开发的时候,商品列表商品图片展示如果使用高清原图,由于高清原图比较大,加载原图时间会大大增加,直接导致系统性能底下,用户体验不好,并发量高的时候直接就 ...
- (zxing.net)二维码QR Code的简介、实现与解码
一.简介 二维码QR Code(Quick Response Code)是由Denso公司于1994年9月研制的一种矩阵二维码符号,它具有一维条码及其它二维条码所具有的信息容量大.可靠性高.可表示汉字 ...
- phonegap3.0+HTMLl5 开发 ipad app 总结
忙碌了一段时间,终于完成了手上的这个ipad上的app ,app是用phonegap+ jquery mobile 开发的,不是用原生的objective c开发的.因为app有许多chart的渲染, ...
- DS博客作业01--日期抽象数据类型
1.思维导图及学习体会(2分) 1.1第一章绪论知识点思维导图 1.2学习体会 从暑假看视频到开学的预习,我感觉数据结构与c语言比起来更加抽象,更加难理解,那些概念也只能理解一些字面意思,对时间复杂度 ...
- Vue 框架 笔记
1.兼容 2.性能优化 vuejs ******作者:尤雨溪 *** *******MVVM框架: M:model层 数据层 数据的增删改查 V:view视图层 类似于html的模板 vm:vie ...
- BZOJ 3239--Discrete Logging(BSGS)
3239: Discrete Logging Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 635 Solved: 413[Submit][Statu ...
- [JS] 四角度旋转特效
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...