• Canvas使用渐变之-线性渐变详解


    在canvas里面,除了使用纯色,我们还能把填充和笔触样式设置为渐变色:线性渐变和径向渐变。

    线性渐变 createLinearGradient(x0,y0,x1,y1)  返回 CanvasGradient

    四个参数分别是渐变色起始坐标x,起始坐标y,结束坐标x,结束坐标y。

    渐变色沿着两点之间的一条线来进行渐变。

    径向渐变 createRadialGradient(x0,y0,r0,x1,y1,r1) 返回CanvasGradient

    六个参数分别是 

            起点圆心坐标(x0,y0)

            起点圆心半径(r0)

            终点圆心坐标(x1,y1)

            终点圆心​半径(r1)

    这两种渐变方法都会返回一个 CanvasGradient对象,这个对象定义了addColorStop(position,color)的方法。

    addColorStop() 给渐变的梯度线添加一种纯色,  返回​void。

    举例

    1 var ctx = document.querySelector('canvas').getContext('2d');
    2 
    3 var grad = ctx.​​createLinearGradient(0,0,500,500);
    4 
    5 grad.addColorStop(0,'green');
    6 
    7 grad.addColorStop(0.5,'yellow');
    8 
    9 grad.addColorStop(1,'blue');

    注意,此时在画布上已经创建了一个矩形渐变范围,坐标是 0,0,500,500;

    但并没有显示出来,此时需要我们再绘出一个别的形状--以​矩形为例。

    来选择我们要显示的渐变范围,这个重新绘出的矩形需要取grad的样式。

    1 ctx.fillStyle = grad; 
    2 ctx.fillRect(x,y,w,h);

    此时,也就是说我们接下来要画的矩形,使用了我们刚才创建的渐变色。

    不难想象,我们预先配置好的渐变范围其实就是一个长宽各500的矩形,渐变方向

    是从左上角到右下角。

    但是,我们要把这个新绘制矩形的放在哪呢?

    我们可以把我们配置好的500*500的渐变范围当一块地,上面被土掩盖了,下面​是各种果实。你想看哪块的果实,你就把这个新矩形画在哪里。

    你可以也画一个0,0,500,500的矩形,直接把整块地翻起来。​

    你也可以画一个0,0,50,50的​矩形,只能看到左上角的绿色green,因为他渐变到yellow,或许是从50之后才开始的。

    你也可以画一个450,450,50,50的矩形,那么你看到的将是右下角的blue。​

  • 相关阅读:
    fiddler---Fiddler模拟接口数据(mock)
    Intellij IDEA gradle项目目录介绍
    Windows netstat 查看端口、进程占用
    SpringMVC和spring常见面试题总结
    mybatis一级缓存二级缓存
    Mybatis常见面试题总结
    Spring容器
    深入理解JVM类加载机制
    理解Spring框架中Bean的5个作用域
    编程语言的分类与关系
  • 原文地址:https://www.cnblogs.com/webhb/p/5614043.html
Copyright © 2020-2023  润新知