精华内容
下载资源
问答
  • 在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。 猜想与答案 给出两个答案: 正确答案是图二,因为这样得...
  • 在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。 猜想与答案 给出两个答案: 正确答案是图二,因为这样得...

    作者:凹凸曼 - Barrior


    在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y

    渐变示例.jpg

    猜想与答案

    给出两个答案:

    猜想.jpg

    正确答案是图二,因为这样得出来的坐标生成的渐变最紧接文本矩形边界,它的运动轨迹如下动图:

    LinearGradient.gif

    (图来源: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
    

    那么这个公式是怎么来的呢?以下是笔者的求解:

    几何图.jpg

    由图可得以下方程组:

    math-1.jpg

    因此可推导出:

    math-2.jpg

    化简后为:

    math-3.jpg

    所以 c1 + c2 为:

    math-4.jpg

    由三角函数平方公式知:cos(A) * cos(A) = 1 - sin(A) * sin(A), 代入 c1 + c2

    math-5.jpg

    第一步化简后:

    math-6.jpg

    最后的结果就是:

    math-7.jpg

    因为 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
    

    看看最终效果

    最终效果.gif

    经验注释

    进行三角函数计算时,应尽量避免先用 tan, 因为 tan 在其周期内存在无穷值,需要做特定的条件判断,而 sin, cos 没有此类问题,代码书写更为简洁清晰并且不会因疏忽产生错误,见下面三角函数与角度的对应关系周期图。

    角度对应的三角函数周期图.png

    参阅:

    Do you really know CSS linear-gradients?

    MDN linear-gradient

    W3C - CSS Images Module Level 3 # linear-gradients


    欢迎关注凹凸实验室博客:aotu.io

    或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:

    欢迎关注凹凸实验室公众号

    展开全文
  • <!DOCTYPE ...> lang= ...创建线性渐变颜色 ...填充线性颜色的那条线是一样的,创建一条线...其中主要是线性渐变颜色的原理,就是一条有方向以及长度的线段,然后设定颜色比重。与PS里的那个线性填充一个原理。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid black;">
        创建canvas画板,设置ID等属性
    </canvas>
    
    <script>
        var c=document.getElementById("myCanvas");/*获取创建的IDmyCanvas的画板*/
        var cxt= c.getContext("2d");/*创建在这个画板上的画笔*/
        var grd=cxt.createLinearGradient(0,0,100,0); /*创建线性渐变颜色*/
       /* cxt.createLinearGradient(x,y,a,b); 其中x y是起始点的坐标,a b是结束点的坐标。
       * 也就是跟PS填充线性颜色的那条线是一样的,创建一条线,有两个坐标,确定长度与方向。
       * 然后在下边的grd.addColorStop()里设定百分比以及颜色。
       * 比如,线的起始点是(00. 结束点是(1000)。这条线段是100像素长度的笔直指向右边的线,他会在坐标 0-100之间进行向右的线性填充
       * 如果线是一条斜线,那么线性颜色的方向也就是斜的,跟PS里一样
       * */
        grd.addColorStop(0,"black");/*设定线的起始颜色*/
        grd.addColorStop(1,"white");/*设定线的结束颜色*/
        cxt.fillStyle=grd;/*填充颜色*/
        cxt.fillRect(0,0,175,50);/*画矩形*/
    </script>
    </body>
    </html>
    具体效果如下:



    思路解释如下:






    仍然是一个canvas标签画板,创建在body标签里

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid black;">
       <!-- 创建canvas画板,设置ID等属性-->
    </canvas>





    然后是绘制函数,script标签里,sc标签放在body标签里

    <script>
        var c=document.getElementById("myCanvas");/*获取创建的IDmyCanvas的画板*/
        var cxt= c.getContext("2d");/*创建在这个画板上的画笔*/
        var grd=cxt.createLinearGradient(0,0,100,0); /*创建线性渐变颜色*/
       /* cxt.createLinearGradient(x,y,a,b); 其中x y是起始点的坐标,a b是结束点的坐标。
       * 也就是跟PS填充线性颜色的那条线是一样的,创建一条线,有两个坐标,确定长度与方向。
       * 然后在下边的grd.addColorStop()里设定百分比以及颜色。
       * 比如,线的起始点是(00. 结束点是(1000)。这条线段是100像素长度的笔直指向右边的线,他会在坐标 0-100之间进行向右的线性填充
       * 如果线是一条斜线,那么线性颜色的方向也就是斜的,跟PS里一样
       * */
        grd.addColorStop(0,"black");/*设定线的起始颜色*/
        grd.addColorStop(1,"white");/*设定线的结束颜色*/
        cxt.fillStyle=grd;/*填充颜色*/
        cxt.fillRect(0,0,175,50);/*画矩形*/
    </script>
    其中主要是线性渐变颜色的原理,就是一条有方向以及长度的线段,然后设定颜色比重。与PS里的那个线性填充一个原理。


    展开全文
  • 前言在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。猜想与答案给出两个答案:正确答案是图二,因为这样得...

    前言

    在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。

    3fad82db3e705ac4212ac59e7d5ae596.png

    猜想与答案

    给出两个答案:

    396f26b833ce8eac6571389ff90b9f90.png

    正确答案是图二,因为这样得出来的坐标生成的渐变最紧接文本矩形边界,它的运动轨迹如下动图:

    0258422aff85a759aeee09e26610278d.gif

    (图来源: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

    那么这个公式是怎么来的呢?以下是笔者的求解:

    fd69126263bd6e0a2964d80127e69808.png

    由图可得以下方程组:

    65b3b5385f58daf9370f6604f54e5994.png

    因此可推导出:

    9ab551b0c0ab1a27b0e5b97fade398be.png

    化简后为:

    c92d513ff244f68251fe3497cb3c93f6.png

    所以 c1 + c2 为:

    c1dcff9f4b71521f78104cd35492f92f.png

    由三角函数平方公式知:cos(A) * cos(A) = 1 - sin(A) * sin(A), 代入 c1 + c2:

    4090c47cd88021332955022c39e91519.png

    第一步化简后:

    2e80d835bc646a97b9a6d31d34f9a19d.png

    最后的结果就是:

    ee7ddf674feb1398672e0a5d8d823351.png

    因为 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

    看看最终效果

    b03665f61e78afe3b3acda26534b06ef.gif

    经验注释

    进行三角函数计算时,应尽量避免先用 tan, 因为 tan 在其周期内存在无穷值,需要做特定的条件判断,而 sin, cos 没有此类问题,代码书写更为简洁清晰并且不会因疏忽产生错误,见下面三角函数与角度的对应关系周期图。

    d1747e8a850b5293cfc63ca5b7851f3e.png

    参阅

    到此这篇关于Canvas 文本填充线性渐变的使用详解的文章就介绍到这了,更多相关Canvas文本填充线性渐变内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    展开全文
  • 渐变色就分为线性渐变色和径向渐变色。线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数。第一步 : 使用一个新的函数createLinearGradient( xstart,ystart,xend,yend );var linearGrad = context....

    fillStyle的第二种使用情况就是渐变色的填充。渐变色就分为线性渐变色和径向渐变色。

    线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数。

    第一步 : 使用一个新的函数createLinearGradient( xstart,ystart,xend,yend );var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend);

    他有四个参数。分别为,xstart,ystart,xend,yend他们构成两个坐标,这两个坐标构成一个线段。这个线段实际上就是一个渐变线。渐变线用于定义渐变的方向和尺度。

    第二步 : 就是在这个渐变线的基础上添加colorStop,这个方法叫addColorStop(stop,color)。他有两个参数分别为stop,color。第一个参数是一个浮点值用来决定关键色的位置。第二个参数是用来决定关键色的颜色。linearGrad.addColorStop(stop,color);

    当做完这两步后这个linearGrad变量就可以作为fillStyle传入这个属性中。

    看代码:

    线性渐变

    window.onload = function () {

    var canvas = document.getElementById("canvas");

    canvas.width = 800;

    canvas.height = 600;

    if (canvas.getContext("2d")) {

    var context = canvas.getContext("2d"); //获取上下文绘图环境

    var linearGrad = context.createLinearGradient(0, 0, 800, 600); //渐变线的起始坐标为(0,0)终止坐标为(800,600)

    linearGrad.addColorStop(0.0, '#000'); //第一个参数表示关键颜色的位置0表示起始位置,1表示终点位置,第二个参数表示关键颜色的颜色。

    linearGrad.addColorStop(1.0, '#fff');

    context.fillStyle = linearGrad;

    context.fillRect(0, 0, 800, 600);

    } else {

    alert('您的浏览器不支持canvas,请更换浏览器尝试~')

    }

    }

    效果图:

    d430a9b3347a924f562d381f88078ec1.png

    当我们创建好linearGrad这个变量后,我们是可以addColorStop是可以添加很多个的。

    举个例子:

    代码:

    var linearGrad = context.createLinearGradient(0, 0, 800, 600); //渐变线的起始坐标为(0,0)终止坐标为(800,600)

    linearGrad.addColorStop(0.0, '#fff');

    linearGrad.addColorStop(0.25, '#FB3');

    linearGrad.addColorStop(0.5, '#690');

    linearGrad.addColorStop(0.75, '#09C');

    linearGrad.addColorStop(1.0, '#000');

    效果图:

    96b84a55c374c827e367c90a4c9ab7c3.png

    还有我们定义的渐变线是倾斜的,我们也可以定义成水平的或者垂直的。我们只要修改一下渐变线的终止坐标即可。看代码,做成水平的渐变色:

    var linearGrad = context.createLinearGradient(0, 0, 800, 0);

    效果图:

    adee6f1ad1acec7e9f64ee4fdbed4e39.png

    垂直的渐变色:

    var linearGrad = context.createLinearGradient(0, 0, 800, 0);

    效果图:

    0056c7e330196d2fa8b226509e4d2a56.png

    我们所做的不管倾斜的水平的还是垂直的,都是贯穿了整个画布,那如果我们的渐变线只指定到了画布的一部分会是什么效果呢?我们修改一下

    var linearGrad = context.createLinearGradient(0, 0, 400, 300);

    效果图:

    66326f4fb02aa624fd1d242c13c9c407.png

    同理我们所创建的渐变线也可以超过这个画布的最大宽高。我们修改一下

    var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);

    效果图:

    0c494882a1aaadb6e35998225986f72c.png

    还有我们所绘制的填充的形状也不一定占满整个画布的。我们可以任意调整自己定义的形状。这个填充的形状会在我们定义的渐变线上找到合适的填充色进而填充出来。举个例子:

    var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);

    效果图:

    60e3727c868242d9978cd76e90849d52.png

    径向渐变:与线性渐变的区别是,径向渐变定义的是一个放射状的渐变。而这个放射状的渐变是定义在两个同心圆的基础上。而不像线性渐变是定义在两点之间的。

    径向渐变也是需要两步来完成。

    第一步 : 使用一个新的函数createRadialGradient(x0,y0,r0,x1,y1,r1); 他有6个参数。前三个参数定义第一个圆环的坐标和半径,后三个参数定义第二个圆环的坐标和半径。整个径向渐变就发生在这两个圆之间。var radialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

    第二步 : 和线性渐变是一样的,就不过多介绍。radialGrad.addColorStop(stop,color);

    代码和线性渐变的代码十分类似。只不过这里使用的是createRadialGradient,我们给他传入参数createRadialGradient(300,300,0,300,300,500),前三个参数定义的是在画布中心,半径为0的一个点。后三个参数定义的是在画布中心半径为500的一个大圆。这样就定义了一个从一个点向外辐射的一个径向渐变。看一下代码

    径向渐变

    window.onload = function () {

    var canvas = document.getElementById("canvas");

    canvas.width = 600;

    canvas.height = 600;

    if (canvas.getContext("2d")) {

    var context = canvas.getContext("2d");

    var radialGrad = context.createRadialGradient(300, 300, 0, 300, 300, 500);

    radialGrad.addColorStop(0.0, '#fff');

    radialGrad.addColorStop(0.25, '#FB3');

    radialGrad.addColorStop(0.5, '#690');

    radialGrad.addColorStop(0.75, '#09C');

    radialGrad.addColorStop(1.0, '#000');

    context.fillStyle = radialGrad;

    context.fillRect(0, 0, 600, 600);

    } else {

    alert('您的浏览器不支持canvas,请更换浏览器尝试~')

    }

    }

    效果图:

    7327183b56da61dcfab24714f8ff3aad.png

    大家可以试着改变一下参数来看看会有什么不同的效果。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 给SVG元素应用填充和描边有三种...我今天先讲线性渐变,下篇我们再看看径向渐变。 SVG线性渐变 如果你看过这系列的SVG之前的文章,你应该对这里渐变的很多概念都比较熟悉啦。在<defs>中定义,然后在后面把...
  • 使用线性渐变颜色填充矩形

    千次阅读 2013-08-13 23:18:37
    使用线性渐变颜色填充矩形.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowTitle="使用
  • 任意角度线性渐变

    2016-07-30 00:15:09
    本例的能实现0~360度的任意角度线性渐变双色矩形填充。 用两种RGB颜色对矩形进行线性渐变填充时,需要合适的算法计算各点的颜色,这样才不会出现中间过渡色,或者出现渐变填充不完整。而在增加从任意角度进行渐变后...
  • SVG 线性渐变

    2021-02-24 11:46:47
    首先我们需要弄清楚什么是渐变,SVG 中的渐变可以理解为一种颜色到另外一种颜色的过渡,而这种颜色的过渡又分为两种形式,即线性渐变和径向渐变。本节我们会先学习线性渐变。 什么是线性渐变 我们先来看线性渐变,...
  • 您也可以在画布形状内填充渐变色。渐变只是从一种颜色到另一种颜色的平滑视觉过渡。有两种类型的渐变可用:线性渐变和...下面的示例使用该createLinearGradient()方法在矩形内部填充线性渐变颜色。让我们尝试一下,...
  • Qt渐变之线性渐变

    千次阅读 2017-08-28 23:23:37
    我们在说到QBrush时提到...Qt中有三种渐变,这里来聊一聊线性渐变QLinearGradient。 我对于线性渐变的理解就是指在一个方向上的渐变。使用上也很简单先看个例子。 渐变需要设置起始点和终止点,我们在构造...
  • Canvas 线性渐变

    2017-04-06 20:55:10
    以下用来设置Canvas的线性渐变: createLinearGradient(x,y,x1,y1) - 创建线条渐变。 当我们使用渐变对象,必须使用两种或两种以上的停止颜色。 addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1...
  • css3线性渐变

    2021-05-11 15:31:52
    创建渐变效果,至少需要两种颜色的定义,才能呈现出过渡的渐变效果,渐变分为线性渐变和径向渐变。线性渐变,指的是线条性的多种颜色过渡;径向渐变,则是指由有一个点像四周扩散式渐变。
  • 一、WPF线性渐变(LinearGradientBrush、GradientStop) 1)LinearGradientBrush--主要属性: StartPoint获取或设置线性渐变的二维起始坐标。 EndPoint获取或设置线性渐变的二维终止坐标。 2)GradientStop-主要...
  • canvas学习-渐变
  • 1、线性渐变(linear):通过linear-gradient函数定义 2、径向渐变(radial):通过radial-gradient函数定义 语法: 线性渐变:background:linear-gradient(方向,颜色,…) 重复线性渐变:repeating-linear-...
  • 渐变色就分为线性渐变色和径向渐变色。 线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数。 第一步 : 使用一个新的函数createLinearGradient( xstart,ystart,xend,yend );var linearGrad = context....
  • 线性渐变

    2018-02-12 10:07:57
    background-image:-o-linear-gradient(left,#CB0B30,#E7778C); background-image:-webkit-linear-gradient(left,#CB0B30,#E7778C); background-image:-moz-linear-gradient(left,#CB0B30,#E7778C);...
  • QSS的关键词 opacity:透明度 如果不行,也可以这样设置:background-color:rgb(0,0,0, 0); 最后一个参数是透明度。...Qt提供了三种渐变画刷,分别是线性渐变(QLinearGradient)、辐射渐变(Q...
  • 本例的能实现0~360度的任意角度线性渐变双色矩形填充。 用两种RGB颜色对矩形进行线性渐变填充时,需要合适的算法计算各点的颜色,这样才不会出现中间过渡色,或者出现渐变填充不完整。而在增加从任意角度进行渐变后...
  • 可以先使用HTML Canvas的线性渐变的函数createLinearGradient()来创建一个渐变色线性对象;然后使用addColorStop()方法定义渐变色颜色;最后将渐变颜色分配给strokeStyle或fillStyle属性进行填充,使用fillRect()等...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,506
精华内容 5,402
关键字:

如何填充线性渐变