图形处理:给 Canvas 文本填充线性渐变
作者:凹凸曼 - Barrior
在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W
, 高为 H
, 左上角坐标为 X, Y
。
猜想与答案
给出两个答案:
正确答案是图二,因为这样得出来的坐标生成的渐变最紧接文本矩形边界,它的运动轨迹如下动图:
(图来源:Do you really know CSS linear-gradients)
渐变起点与终点坐标的计算
所以,渐变的起点与终点坐标该怎么计算呢?答:
- 先求得起点与终点的长度(距离)。
- 根据长度与文本矩形的中心点坐标分别计算出起点与终点坐标。
线性渐变长度的计算 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
那么这个公式是怎么来的呢?以下是笔者的求解:
由图可得以下方程组:
因此可推导出:
化简后为:
所以 c1 + c2
为:
由三角函数平方公式知:cos(A) * cos(A) = 1 - sin(A) * sin(A)
, 代入 c1 + c2
:
第一步化简后:
最后的结果就是:
因为 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
看看最终效果
经验注释
进行三角函数计算时,应尽量避免先用 tan
, 因为 tan
在其周期内存在无穷值,需要做特定的条件判断,而 sin, cos
没有此类问题,代码书写更为简洁清晰并且不会因疏忽产生错误,见下面三角函数与角度的对应关系周期图。
参阅:
Do you really know CSS linear-gradients?
W3C - CSS Images Module Level 3 # linear-gradients
欢迎关注凹凸实验室博客:aotu.io
或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:
图形处理:给 Canvas 文本填充线性渐变的更多相关文章
- css之为文本添加线性渐变和外描边
css之为文本添加线性渐变和外描边 一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边 解决:在before ...
- 使用canvas来完成线性渐变和径向渐变的功能
fillStyle的第二种使用情况就是渐变色的填充.渐变色就分为线性渐变色和径向渐变色. 线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数. 第一步 : 使用一个新的函数cre ...
- HTML5 Canvas ( 线性渐变, 升级版的星空 ) fillStyle, createLinearGradient, addColorStop
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Canvas使用渐变之-线性渐变详解
在canvas里面,除了使用纯色,我们还能把填充和笔触样式设置为渐变色:线性渐变和径向渐变. 线性渐变 createLinearGradient(x0,y0,x1,y1) 返回 CanvasGrad ...
- 如何给SVG填充和描边应用线性渐变
给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线 ...
- fillStyle线性渐变
废话小说,沾待马 <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>ca ...
- CSS3-canvas绘制线性渐变
<!doctype html><html><head><meta charset="utf-8"><title>canv ...
- html5 基本布局+新标签+新选择器 + 线性渐变
html5 基本布局+新标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变
颜色插值指的是给出两个 RGB 颜色值,两个颜色之间的值通过插值函数计算得到.线性渐变是添加到 SVG 图形上的过滤器,只需给出两端的颜色值即可. 1. 颜色插值 在[高级 - 第 5.0 章]里已经 ...
随机推荐
- Scrapy 小技巧(一):使用 scrapy 自带的函数(follow & follow_all)优雅的生成下一个请求
前言 如何优雅的获取同一个网站上下一次爬取的链接并放到生成一个 Scrapy Response 呢? 样例 from urllib import parse import scrapy class S ...
- WPF 学习(一)
一.WPF介绍 WPF全称 Windows Presentation Foundation,干啥用的? 主要是用来制作Windows桌面客户端软件的. .Net平台下制作Windows桌面客户端软件主 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(五)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- 实战记录之SQL server报错手工注入
前言 最近测试了一个站点,这个站点挺有意思,发现没有关闭错误提示,初步猜测是SQL server数据库,后来验证确实是.在这里记录一下实战过程,并详细讲解一下用到的知识点. SQL server报错注 ...
- 使用 UniApp 实现小程序的微信登录
微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录 在main.js 中分定义全局变量,用于存储接口地址 如果没有登录.则跳转至登录页面 进入登录页面 通过 wx.login 获取 ...
- Python大神编程常用4大工具,你用过几个?
摘要:Python是一种跨平台的编程语言,能够在所有主要的操作系统上,运行你编写的任何Python程序.今天介绍几款常见的工具:Python自带的解释器.文本编辑器(Geany.Sublime Tex ...
- hadoop知识整理(1)之HDFS
一.HDFS是一个分布式文件系统 体系架构: hdfs主要包含了3部分,namenode.datanode和secondaryNameNode namenode主要作用和运行方式: 1)管理hdfs的 ...
- 最全的DOM事件笔记
1. DOM事件模型 DOM是微软和网景发生"浏览器大战"时期留下的产物,后来被"W3C"进行标准化,标准化一代代升级与改进,目前已经推行至第四代,即 leve ...
- Install Centos7 on VirtualBox in mac
Step 1:准备虚拟机及镜像 下载合适的Virtual Box版本 官方下载链接:https://www.virtualbox.org/wiki/Downloads 这里选择的版本是:https:/ ...
- [每日一题2020.06.12]P3375 【模板】KMP字符串匹配
题目链接 关于kmp : https://www.cnblogs.com/roccoshi/p/13096988.html 关于kmp, 想了很久, 我觉得不应该放在这里写, 另开一贴记录一下. #i ...