图形处理:给 Canvas 文本填充线性渐变

九路 等级 783 0 0

在 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入门实战之用javascript面向对象实现一个图形验证码
本文主要介绍用canvas实现图形验证码的一些思路以及如何用javascript面向对象的方式更友好的实现canvas的功能,关于canvas的一些基本使用方法和API我整理了一个思维导图,大家感兴趣的可以参考学习。 (https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b158fad95
GoJS如何制作影像
[GoJS](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F3108)是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canv
javafx加入特效后无法删除
今天学习Canvas时候发现,如果加入effect效果,那么clearRect方法就删除不了了,不知道这个是不是bug~ 如果有知道如何解决,希望可以告诉我一下 代码如下:         Canvas canvas = new Canvas(WSystem.WIDTH, WSystem.HEIGHT); GraphicsConte
HTML5 Canvas 学习日志(七)
HTML5 Canvas 学习日志(七) **Export Canvas 导出Canvas** context.fillStyle = "rgb(0, 102, 153)";context.save();context.fillRect(50, 50, 100, 100);context.fillStyle = "rgb(200, 0, 0)"
HTML5实现绘制几何图形
HTML5新增了一个<canvas.../>属性。该元素自身并不绘制图形,只是相当于一张空画布。如果开发者需要向<canvas.../>上绘制图形则必须使用JavaScript脚本进行绘制。 为了向<canvas.../>元素上绘图,必须经过如下3步。 获取<canvas.../>元素对应的DOM对象,这是一个Canvas对象。 调用Canvas对象
Canvas 3D engine_HTML5动画引擎
![Canvas 3D engine_HTML5动画引擎](http://static.oschina.net/uploads/img/201403/22152537_1gkA.jpg) HTML5尚在发展当中,说替代Flash还言之过早,但它所实现的炫目功能大家也是有目共睹的,一个canvas 可以做成如此效果,那我们为什么
Canvas + JavaScript 制作图片粒子效果
学习canvas,javascript的小伙伴,可以跟着我这篇文章的思路一起做一个小效果出来,代码都齐全了。 首先看一下源图和转换成粒子效果的对比图: ![Canvas + JavaScript 制作图片粒子效果](https://oscimg.oschina.net/oscnet/ded02015391ee81719a21ffa584785e84c2.
Canvas绘制不规则图形,实现可拖动,编辑
目前的工作在做在线的标注工具,接触canvas一年了,各种绘制,基本上图像的交互canvas都可以完成,也写了几篇关于canvas的文章,遇到的问题也写博客上了,对于canvas有问题的朋友可以去看看。一直想写一个关于canvas系列的东西,也没时间。正好最近再捣鼓canvas,有时间就写一点,一个功能一个功能的写,争取写一个系列。 以前都是绘制矩形,
Canvas:技术小结
Canvas:技术小结 =========== ### 资料 **【教程:MDN官方中文教程】** https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas\_API/Tutorial **【系列博客:每天一点Canvas动画】** https://segmentfault.com/blog/z
ES6与canvas实现鼠标小球跟随效果
               最近闲来无聊,看了下ES6的语法,结合canvas实现了动画特效——随着鼠标的移动,会有小球跟随且自动消失的动画。 首先,html部分,目前就一个canvas标签。 1 <canvas id="canvas"> 2 当前浏览器不支持! 3 </canvas> 其次,css部分,没有考
GoJS用于HTML图表的JavaScript库
[GoJS](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F3108)是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canv
HTML5 & CSS3 初学者指南(4) – Canvas使用
介绍 == 传统的HTML主要用于文本的创建,可以通过<img>标签插入图像,动画的实现则需要第三方插件。在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力。HTML5的到来,带来了新的成员<canvas>标签。 什么是 Canvas? =========== HTML5 的 Canvas 元素使用 JavaScript 在网页上绘制图像。
HTML5 Canvas画线技巧
利用Canvas标签换线需要怎么做?首先,我们必须先搭建一个“舞台”。 <!DOCTYPE html>  <html>   <head>    <meta charset="gbk">    <title>Canvas画线技巧</title>   </head>  <body>    <c
HTML5 canvas标签详解
转载: <**canvas**\>是**html5**当中的一个标签,通过Javascript来画图。 <canvas id=”canvas” width=”150″ height=”150″></canvas> <script> var canvas = document.getElementById(”canvas”); var ctx = c
Openlayers4中实现动态线效果
**概述:** 本文讲述如何结合canvas在Openlayers4中实现动态线的效果。 **效果:** ![](https://static.oschina.net/uploads/img/201804/25191518_tjv1.jpg) **代码:** 1、move-line扩展 **\[javascript\]** [view plain