今天又再看了html5的颜色渐变API，发现没有第一次看那么复杂。

不过我对这个颜色渐变存在着一个疑惑就是两种色带之间，那段是属于两种颜色混合的，有点模糊。

比如从红色变成黄色，在红与黄之间的那个地方，不会是纯色的红和黄，我一开始不是很明白，现在我是理解的：渐变颜色嘛，字面上的意思，就是渐变，在这两种颜色之间，由一种颜色渐变过渡到另一种颜色。

一、创建渐变颜色对象的步骤蛮简单的，线性渐变比径向渐变少了两个参数而已。具体步骤是这样的：

1、获取到你的canvas画布后，我们需要创建颜色渐变对象   var gradient

2、设置要渐变的颜色带   addColorStop(颜色带的所在点,"颜色")

3、将颜色渐变对象赋值给填充类型 fillStyle

4、进行绘制

ok了！

<body>

        <!--

            作者：1107989194@qq.com

            时间：2014-04-12

            描述：渐变色   linear   radial

        -->

        <canvas id="myCanvas" width="300" height="150" style="border: 1px solid black"></canvas>

        <script>

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

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

            var gradient = context.createLinearGradient(0,0,myCanvas.width,0);     //创建颜色渐变对象

            gradient.addColorStop(0,'blue');                                       //设置颜色停止点(过渡颜色所在位置)

            gradient.addColorStop(0.25,'white');

            gradient.addColorStop(0.5,'purple');

            gradient.addColorStop(0.75,'red');

            gradient.addColorStop(1.0,'yellow');

            context.fillStyle = gradient;                       //把渐变对象赋值给填充类型

            context.fillRect(0,0,myCanvas.width,myCanvas.height); //绘制图形

        </script>

        <!--

            作者：1107989194@qq.com

            时间：2014-04-12

            描述：径向渐变

        -->

        <canvas id="myCanvas2" width="300" height="150" style="border: 1px solid black">换个浏览器呗</canvas>

        <script>

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

            var context2 = myCanvas2.getContext("2d");

            //var gradient2 = context.createRadialGradient(0,0,myCanvas2.width,myCanvas2.width,myCanvas2.height,myCanvas2.height);     //创建颜色径向渐变对象

            var gradient2 = context2.createRadialGradient(myCanvas2.width/2,myCanvas2.height/2,0,myCanvas2.width/2,myCanvas2.height/2,100);     //创建颜色径向渐变对象(一个圆从中间向四周径向渐变)

            gradient2.addColorStop(0,'blue');                    //设置颜色停止点(过渡颜色所在位置)

            gradient2.addColorStop(0.25,'white');

            gradient2.addColorStop(0.5,'purple');

            gradient2.addColorStop(0.75,'red');

            gradient2.addColorStop(1.0,'yellow');

            context2.fillStyle = gradient2;

            context2.fillRect(0,0,myCanvas2.width,myCanvas2.height);

        </script>

    </body>

两种颜色渐变函数的参数说明：

context.createLinearGradient(x0,y0,x1,y1);
参数 描述
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
 
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数 描述
x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 createLinearGradient() 方法、createRadialGrradient()方法。

注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

关于径向渐变，我自己觉得最简单的理解就是：

例如我们要径向渐变一个圆，从圆心往四周颜色渐变，那么圆心所在的那个圆的坐标就是(x1,y1) r1=0，渐变的大圆的坐标（x2,y2） r2=r(r为圆的半径)。

这是上面径向渐变的代码的效果截图：

从圆心（blue）——>四周（yellow）

HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient的更多相关文章

  1. .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格

    一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...

  2. AspNetWebApi管线中如果定义两种类型的消息处理程序（全局/路由)

    AspNetWebApi管线中如果定义两种类型的消息处理程序(全局/路由) 在AspNetWebApi管线中存在两种类型的消息处理程序(Message Handler) 1.全局消息处理程序,所有的请 ...

  3. apache软件no_ssl和openssl两种类型的区别

    apache软件同一版本有两种类型:no_ssl和openssl: openssl多了个ssl安全认证模式,它的协议是HTTPS而不是HTTP,这就是带有SSL的服务器与一般网页服务器的区别了. 一般 ...

  4. 从上面的集合框架图可以看到，Java 集合框架主要包括两种类型的容器，一种是集合（Collection），存储一个元素集合，另一种是图（Map），存储键/值对映射

    从上面的集合框架图可以看到,Java 集合框架主要包括两种类型的容器,一种是集合(Collection),存储一个元素集合,另一种是图(Map),存储键/值对映射.Collection 接口又有 3 ...

  5. JavaScript中两种类型的全局对象/函数【转】

    Snandy Stop, thinking is the essence of progress. JavaScript中两种类型的全局对象/函数 这里所说的JavaScript指浏览器环境中的包括宿 ...

  6. Spring 让 LOB 数据操作变得简单易行，LOB 代表大对象数据，包括 BLOB 和 CLOB 两种类型

    转自:https://www.ibm.com/developerworks/cn/java/j-lo-spring-lob/index.html 概述 LOB 代表大对象数据,包括 BLOB 和 CL ...

  7. 块级标签与预格式化文本标签----------大多数XHTML可以表示为两种类型的标签：块标签（block tag）和内联标签（inline tag）

    <html> <head> <meta charset="utf-8"> <title>块级标签</title> < ...

  8. github page的两种类型

    1. 什么是Github ? Github 官方主页 简单说,Github是一个基于git的社会化代码分享社区. 你可以在Github上创建免费的远程仓库(remote repository),分享你 ...

  9. HTML5 客户端存储数据的两种方式

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

随机推荐

  1. POJ 1129 Channel Allocation 四色定理dfs

    题目: http://poj.org/problem?id=1129 开始没读懂题,看discuss的做法,都是循环枚举的,很麻烦.然后我就决定dfs,调试了半天终于0ms A了. #include ...

  2. Servlet的一些API使用介绍

    final String rootPath = getServletConfig().getServletContext().getRealPath("/");  获取项目运行的根 ...

  3. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

  4. hdu 4764 && 2013长春网赛题解

    一个组合游戏题. 解答: 从后面往前面推,首先n-1是必胜位,然后前面的k位是必败位,如此循环下去.所以题目就容易了! 代码: #include<cstdio> using namespa ...

  5. iOS开发UI基础—手写控件，frame，center和bounds属性

    iOS开发UI基础—手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...

  6. 【java并发】线程同步工具Semaphore的使用

    Semaphore通常用于限制可以访问某些资源(物理或逻辑的)的线程数目,我们可以自己设定最大访问量.它有两个很常用的方法是acquire()和release(),分别是获得许可和释放许可.  官方J ...

  7. IPV6 实现

    看代码实现前,请先保证了解ipv6的概念,可以先看ipv6介绍一文.code extract . 在文件 net/ipv6/af_inet6.c 中包含了ipv6协议初始化的主函数. static i ...

  8. Wide character in print at a2.pl line 6.

    jrhapt01:/home/tomcat/test> cat a2.pl my $str="$ARGV[0]"; use Encode; use URI::Escape; ...

  9. dump 验证实例恢复的起点和终点

    什么时候会产生实例恢复呢?当你数据库服务器异常断电,重启数据库就会发生实例恢复.实例恢复是由数据库自动完成的,无须DBA的干涉.当然这里有个前提条件:数据文件. 在线日志文件.控制文件不得有损坏. 我 ...

  10. oracle 读取最大值sql

    select * from table a1 where rowid = ( select max(rowid) from table a2 where a2.id_subject_cost=a1.i ...