今天又再看了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. 本博客css style

    #navList { min-height: 60px; } #navList li { height: 60px; } #navList a { margin: 0px 5px !important ...

  2. NET笔记——Delegate

    对于初学者,委托是很容易让人晕的,一是晕它如何起作用,二是晕它有什么用. 最近回过头来又看了下委托,又有些不同的感觉,写之自用. 声明方面,委托可以被声明在类内,也可以与类同级,并且声明时没有方法体: ...

  3. Java集合类操作优化总结

    清单 1.集合类之间关系 Collection├List│├LinkedList│├ArrayList│└Vector│ └Stack└SetMap├Hashtable├HashMap└WeakHas ...

  4. Windows server2008 搭建ASP接口访问连接oracle数据库全过程记录--备用

    真的是太不容易了,以前的时候在window server 2003上面搭建了一套asp+oracle的接口系统,就费了好大的劲儿,其实那会迷迷瞪瞪的也不知道怎么的就弄好了,也懒得管了.OK,从昨天到今 ...

  5. 设置UITextField的placeholder的颜色

    [textField setValue:[UIColor redColor] forKeyPath:@"_placeholderLabel.textColor"];

  6. XE5 开发android平台搭建

    转载自:http://www.cnblogs.com/hezihang/p/3319980.html Delphi XE5的Android开发平台搭建   Delphi XE5支持Android AR ...

  7. bzoj 3435: [Wc2014]紫荆花之恋 替罪羊树维护点分治 && AC400

    3435: [Wc2014]紫荆花之恋 Time Limit: 240 Sec  Memory Limit: 512 MBSubmit: 159  Solved: 40[Submit][Status] ...

  8. ECMall模板开发文档

    ECMall 模板开发文档 前 言 欢迎阅读 ECMall 模板制作教程,通过阅读本教程可快速上手 ECMall 模板的使用和制作. ECMall 模板制 作要求用户具备 XML . XHTML 和 ...

  9. 一周一话题之一（EF-CodeFirst、MEF、T4框架搭建学习）

    本话题是根据郭明峰博客<MVC实用架构系列>的搭建学习总结. -->目录导航 一.数据仓储访问的构建     1.UnitOfWork的构建     2.Repository的构建 ...

  10. Android 制作一个网页源代码浏览器（HttpURLConnection）

    package com.wuyou.htmlcodeviewer; import android.os.Bundle; import android.os.Handler; import androi ...