Canvas 文本填充线性渐变的使用详解


Posted in HTML / CSS onJune 22, 2020

前言

在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y

Canvas 文本填充线性渐变的使用详解

猜想与答案

给出两个答案:

Canvas 文本填充线性渐变的使用详解

正确答案是图二,因为这样得出来的坐标生成的渐变最紧接文本矩形边界,它的运动轨迹如下动图:

Canvas 文本填充线性渐变的使用详解

(图来源:Do you really know CSS linear-gradients)

渐变起点与终点坐标的计算

所以,渐变的起点与终点坐标该怎么计算呢?答:

  1. 先求得起点与终点的长度(距离)。
  2. 根据长度与文本矩形的中心点坐标分别计算出起点与终点坐标。

线性渐变长度的计算 W3C 给出了一个公式(A 表示角度):

gradientLineLength = abs(W * sin(A)) + abs(H * cos(A))

不过,该公式主要应用于 CSS 的线性渐变设置,即以 12 点钟方向为 0°,顺时针旋转。

而我们需要的是以 3 点钟方向为 0°,逆时针旋转,即公式为:

gradientLineLength = abs(W * cos(A)) + abs(H * sin(A))

// 半长:
halfGradientLineLength = (abs(W * cos(A)) + abs(H * sin(A))) / 2

那么这个公式是怎么来的呢?以下是笔者的求解:

Canvas 文本填充线性渐变的使用详解

由图可得以下方程组:

Canvas 文本填充线性渐变的使用详解

因此可推导出:

Canvas 文本填充线性渐变的使用详解

化简后为:

Canvas 文本填充线性渐变的使用详解

所以 c1 + c2 为:

Canvas 文本填充线性渐变的使用详解

由三角函数平方公式知:cos(A) * cos(A) = 1 - sin(A) * sin(A), 代入 c1 + c2

Canvas 文本填充线性渐变的使用详解

第一步化简后:

Canvas 文本填充线性渐变的使用详解

最后的结果就是:

Canvas 文本填充线性渐变的使用详解

因为 sin, cos 在函数周期内存在负值(见下面角度对应的三角函数周期图),所以线性渐变的长度需要取绝对值。

至此,我们知道了线性渐变长度,文本矩形的中心点坐标很好算,即:

centerX = X + W / 2
centerY = Y + H / 2

所以,起点与终点的坐标分别为:

startX = centerX - cos(A) * halfGradientLineLength
startY = centerY + sin(A) * halfGradientLineLength

endX = centerX + cos(A) * halfGradientLineLength
endY = centerY - sin(A) * halfGradientLineLength

看看最终效果

Canvas 文本填充线性渐变的使用详解

经验注释

进行三角函数计算时,应尽量避免先用 tan, 因为 tan 在其周期内存在无穷值,需要做特定的条件判断,而 sin, cos 没有此类问题,代码书写更为简洁清晰并且不会因疏忽产生错误,见下面三角函数与角度的对应关系周期图。

Canvas 文本填充线性渐变的使用详解

参阅

Do you really know CSS linear-gradients?

MDN linear-gradient

W3C - CSS Images Module Level 3 # linear-gradients

到此这篇关于Canvas 文本填充线性渐变的使用详解的文章就介绍到这了,更多相关Canvas文本填充线性渐变内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 #HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 #HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 #HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 #HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 #HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 #HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 #HTML / CSS
You might like
php实现邮件发送并带有附件
2014/01/24 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
Javascript 按位与运算符 (&)使用介绍
2014/02/04 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
python爬虫实例详解
2018/06/19 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
打造完美自荐信
2014/01/24 职场文书
服务理念标语
2014/06/18 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
无财产离婚协议书范本
2014/10/28 职场文书