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 中实现炫酷的loading效果
Apr 26 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 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 ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
js document.write()使用介绍
2014/02/21 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
移风易俗倡议书
2014/04/15 职场文书
2015年教师节活动总结
2015/03/20 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python
mysql幻读详解实例以及解决办法
2022/06/16 MySQL