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解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
HTML中的表单元素介绍
Feb 28 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php ios推送(代码)
2013/07/01 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
php微信公众平台开发类实例
2015/04/01 PHP
php生成图片验证码
2015/06/09 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
英国网上电器商店:Electricshop
2020/03/15 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
什么是Smart Navigation?
2016/07/03 面试题
描述RIP和OSPF区别以及特点
2015/01/17 面试题
商业项目策划方案
2014/06/05 职场文书
首都博物馆观后感
2015/06/05 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android