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制作响应式导航菜单的方法
Jul 12 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
JQuery扩展对象方法操作示例
2018/08/21 jQuery
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
复习Python中的字符串知识点
2015/04/14 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
建筑专业自荐信范文
2014/01/05 职场文书
安全标兵事迹材料
2014/08/17 职场文书
新郎新娘答谢词
2015/01/04 职场文书
科技馆观后感
2015/06/08 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript