今天又再看了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. Pyhon编码事项

    1. 永远不要使用import * Pylint代码审查:Wildcard import XXX 如果函数名重名,或者要导入的内容里面包含了from datetime import datetime, ...

  2. __construct()和__initialize()

    ThinkPHP中的__initialize()和类的构造函数__construct()网上有很多关于__initialize()的说法和用法,总感觉不对头,所以自己测试了一下.将结果和大家分享.不对 ...

  3. java 集合（二）

    1.练习题 如果输入的字符里有非英语字母的,不给于执行

  4. asp.net与MVC4的路由原理和过程【学习笔记】

    当IIS收到一个http请求,把请求信息发给对应的HttpModel(实际是实现类UrlRoutingModule),在HttpModel中会注册HttpApplication 类中的PostReso ...

  5. C#在声明对象时对其赋值的一种方式

    今天学会一种更方便的赋值方式,如下, 同时存档一个通过 打开对话框 获取地址的方式. private string GetSaveAsPathXls(string defaultFileName) { ...

  6. Linux技术修复

    今天在慕课网上学习了Linux的一些知识: 我使用命令: ***:~$ route add default gw 192.168.1.1 添加了一个网关:192.168.1.1之后的结果为: ***: ...

  7. 把 Eclipse 中的工程 Push 到 Github（适用 Windows 平台）

    今天发现一小技巧,关于如何把Eclipse的某一个Existing project push 到github服务器. Eclipse 应该是 JavaEE 版本. 在project 右键 team, ...

  8. 【Xamarin开发 Android 系列 2】VS2015跨平台开发的几种方式

    原文:[Xamarin开发 Android 系列 2]VS2015跨平台开发的几种方式 在微软Build大会上,微软宣布在VS2015中支持三种方式进行跨平台的开发. 1. Xamarin 2. Co ...

  9. Python Monkey patch猴子补丁

    monkey patch (猴子补丁)   用来在运行时动态修改已有的代码,而不需要修改原始代码. 简单的monkey patch 实现:[python] #coding=utf-8 def orig ...

  10. flexPaper +swftools实现文档在线阅读

    网上已有很多FlexPaper仿百度文库的一些文章,园子里也有很多大牛的详细教程. 结合这次做的例子,在这里详细记录一下使用Flexpaper实现仿百度文库的效果,及自己在跟着园子里的教程做的时候,遇 ...