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 transform 属性来变换背景图的方法
May 07 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
joomla数据库操作示例代码
2016/01/06 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
shiro授权的实现原理
2017/09/21 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
一些Python中的二维数组的操作方法
2015/05/02 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Django中的forms组件实例详解
2018/11/08 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
大课间活动实施方案
2014/03/06 职场文书
聘任书模板
2014/03/29 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
教代会闭幕词
2015/01/28 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
幼儿园小班教学反思
2016/03/03 职场文书