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匹配手机屏幕横竖状态
Jan 27 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 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
一个简易需要注册的留言版程序
2006/10/09 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
JavaScript字符串对象
2017/01/14 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
微信小程序云开发之新手环境配置
2019/05/16 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
python获取多线程及子线程的返回值
2017/11/15 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
详解Python3定时器任务代码
2019/09/23 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
劳动模范事迹材料
2014/01/19 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
班主任经验交流材料
2014/12/16 职场文书
焦点访谈观后感
2015/06/11 职场文书
发票退票证明
2015/06/24 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
速龙x4-860k处理器相当于i几
2022/04/20 数码科技