今天又再看了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. PYTHON 获取机器硬件信息及状态

    #!/usr/bin/env python # encoding: utf-8 from optparse import OptionParser import os import re import ...

  2. osg学习笔记2, 命令行参数解析器ArgumentParser

    ArgumentParser主要负责命令行参数的读取 #include <osgDB/ReadFile> #include <osgViewer/Viewer> int mai ...

  3. 2016-10-31 reload

    经历了创业公司的欠薪后,决定重新开始,从原本着力于如何快速入门与实现变更为巩固基础再出发. 2016-10-31

  4. Docker的安装及简单使用

    1.  Docker的安装 (这里的“安装docker”其实就是安装Docker Engine) $ sudo apt-get intasll docker.io note: apt-get是ubun ...

  5. 关于Java（JDBC连接数据库）

    Processing SQL Statements with JDBC 处理JDBC中的SQL语句 这节主要是 JDBC 与数据库交互的基本步骤 JDBC的基石是DriverManager,通过它,J ...

  6. 【转载】JavaEE权限管理分析

    JavaEE权限管理分析 一．背景 在 Web 应用开发中,安全一直是非常重要的一个方面.安全虽然属于应用的非功能性需求,但是应该在应用开发的初期就考虑进来.如果在应用开发的后期才考虑安全的问题,就可 ...

  7. ReactEurope Conf 参会感想

    React 带来的革命性创新是前端世界过去几年最激动人心的变化.自从接触 React 以来,我深信 React 会改变客户端开发者(包括前端.iOS 和 Android)的开发体验.这次在巴黎举办的  ...

  8. settimeout vs setinternal

    http://blog.sina.com.cn/s/blog_6b1ab3be0100pzmo.html http://www.360doc.com/content/11/0412/17/100779 ...

  9. USB C和USB 3.1傻傻分不清？这篇文章可以帮你

    USB Type-C接口以及USB 3.1标准的到来,理应为消费者提供更多便利.然而就目前来看,似乎这些新标准非但没有为消费者提供了更好的使用体验,反而带来了诸多隐患.Google的工程师Benson ...

  10. Android开源项目发现---ListView篇（持续更新）

    资料转载地址:https://github.com/Trinea/android-open-project 1. android-pulltorefresh 一个强大的拉动刷新开源项目,支持各种控件下 ...