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 < ...
随机推荐
- ASP Base64位 加密解密
网上找了很多,运行时都会提示某个错误,有点乱.后面找到测试,这个转ASNI码的能实现 sBASE_64_CHARACTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabc ...
- C#学习(1):类型约束
where T : class泛型类型约束 类型参数约束,.NET支持的类型参数约束有以下五种: where T : struct | T必须是一个结构类型 where T : class T必须是一 ...
- C# 转换为int类型时原本的正数变为负数
转载http://bkcoding.cn/post_1215.html 平时定义变量用的int( int32 ),其取值范围为-2,147,483,648~2,147,483,647 当需要转换为in ...
- Lock的await/singal 和 Object的wait/notify 的区别
在使用Lock之前,我们都使用Object 的wait和notify实现同步的.举例来说,一个producer和consumer,consumer发现没有东西了,等待,produer生成东西了,唤醒. ...
- Java找那个io类-File获取功能
package com.hxzy.IOSer;import java.io.*; /* * File 的获取功能 * */public class Demo04 { public static voi ...
- C++中运算符的优先级
运算符挺多的,很难一一记住他们的优先级,在此去别人博客复制以下内容,供自己以后学习. 优先级 运算符 含 义 要求运算 对象的个数 结合方向 1 () [] -> . 圆括号 下标运算符 ...
- Xcode括号自动补全以及二次编译后不显示输入
今天遇到了一个大坑,在使用栈来进行计算表达式的时候,发现输入括号就报错,以及二次编译后不显示. 测试了好久,经过无数次debug后. 二次编译不显示还是没搞明白,不过输入倒是没什么问题,就是不显示出来 ...
- 3.1)DFM-塑胶件设计总章
本章目的:各种塑胶工艺了解,DFM-塑胶件的设计准则是依据哪种工艺. 1.塑胶概念 塑胶的定义(美国塑料工业协会): 塑胶主要由碳.氧.氢和氮及其他有机或无机元素所构成,成品为固体,在制造过程中是熔融 ...
- win10 下springcloud打包docker镜像部署。
1:建一个最简单的springcloud应用. 2:在根目录下新建dockerfile,文件如下: FROM openjdk:8-jdk-alpine VOLUME /tmp ARG JAR_FILE ...
- Redis报错:redis.exceptions.ResponseError: MISCONF Redis is configured to save RDB snap
首先找到出现错误的原因: redis.exceptions.ResponseError: MISCONF Redis is configured to save RDB snapshots, but ...