zoukankan      html  css  js  c++  java
  • Canvas使用渐变之-径向渐变详解

    创建径向渐变使用

    createRadialGrdient(x0,y0,r0,x1,y1,r1)​

    一共​六个参数,分别代表:

    起点的圆心坐标(第一个和第二个参数),

    起点园的半径(第三个参数),

    终点的圆心坐标(第四个和第五个参数),

    终点的圆心半径(第六个参数)​。

    该方法返回CanvasGradient对象,该对象定义了addColorStop方法。

    addColorStop(,);

    两个参数,第一个是要添加颜色的位置,第二个是要添加的纯色。

    代码示例:

     1 var ctx = document.querySelector('canvas').getContext('2d');
     2 
     3 var grad = ctx.createRadialGrdient(250,70,20,200,60,100);
     4 
     5 grad.addColorStop(0,'red');
     6 
     7 grad.addColorStop(0.5,'green');
     8 
     9 grad.addColorStop(1,'blue');
    10 
    11  
    12 
    13 ctx.fillStyle = grad;
    14 
    15 ctx.fillRect(0,0,500,140);

    在这个例子里,起点圆比较小,被终点圆包围,当我们给这个渐变添加颜色的时候,他们会被放置在起点圆边界和终点圆边界之间的一条线段上。就是addColorStop里面的的0-1之间。

    因此我们可以指定这两个圆的位置,所以圆边界之间的距离可能会有变化,颜色渐变速度可能也会有所不同。

    注意:当你设定的两个圆不存在包含关系的时候要小心,不同浏览器对于如何开始渐变存在不一致性,结果也很混乱。

    可结合另一篇​文章《Canvas使用渐变之-线性渐变详解》一起阅读理解。

  • 相关阅读:
    MySQL存储过程详解 mysql 存储过程(转)
    JDBC数据库常用操作(mysql)
    [转]Tomcat处理一个HTTP请求的过程
    [转]Tomcat工作原理详解
    MySQL性能优化的最佳20+条经验(转)
    CSS字体中英文名称对照表(转)
    XML的基本用法(转)
    Maximum file handles allowed by OS
    Tips on rendering interiors
    Performance profile of a typical interior scene
  • 原文地址:https://www.cnblogs.com/webhb/p/5614050.html
Copyright © 2011-2022 走看看