fillStyle的第二种使用情况就是渐变色的填充。渐变色就分为线性渐变色和径向渐变色。
 
线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数。
 
第一步 : 使用一个新的函数createLinearGradient( xstart，ystart,xend,yend );  var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend);
他有四个参数。分别为，xstart，ystart,xend,yend他们构成两个坐标，这两个坐标构成一个线段。这个线段实际上就是一个渐变线。渐变线用于定义渐变的方向和尺度。
 
第二步 : 就是在这个渐变线的基础上添加colorStop,这个方法叫addColorStop(stop,color)。他有两个参数分别为stop,color。第一个参数是一个浮点值用来决定关键色的位置。第二个参数是用来决定关键色的颜色。  linearGrad.addColorStop(stop,color);
 
当做完这两步后这个linearGrad变量就可以作为fillStyle传入这个属性中。
 
看代码:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>线性渐变</title>

</head>

<body>

    <canvas id="canvas" style="border: 1px solid #aaa;display:block;margin:0 auto"></canvas>

</body>

</html>

<script>

    window.onload = function () {

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

        canvas.width = 800;

        canvas.height = 600;

        if (canvas.getContext("2d")) {

            var context = canvas.getContext("2d");  //获取上下文绘图环境

            var linearGrad = context.createLinearGradient(0, 0, 800, 600);   //渐变线的起始坐标为(0,0)终止坐标为(800,600)

            linearGrad.addColorStop(0.0, '#000');    //第一个参数表示关键颜色的位置0表示起始位置,1表示终点位置,第二个参数表示关键颜色的颜色。

            linearGrad.addColorStop(1.0, '#fff');

            context.fillStyle = linearGrad;

            context.fillRect(0, 0, 800, 600);

        } else {

            alert('您的浏览器不支持canvas,请更换浏览器尝试~')

        }

    }

</script>
效果图:
当我们创建好linearGrad这个变量后，我们是可以addColorStop是可以添加很多个的。举个例子:代码:
 var linearGrad = context.createLinearGradient(0, 0, 800, 600);   //渐变线的起始坐标为(0,0)终止坐标为(800,600)

 linearGrad.addColorStop(0.0, '#fff');

 linearGrad.addColorStop(0.25, '#FB3');

 linearGrad.addColorStop(0.5, '#690');

 linearGrad.addColorStop(0.75, '#09C');

 linearGrad.addColorStop(1.0, '#000');

效果图:

还有我们定义的渐变线是倾斜的，我们也可以定义成水平的或者垂直的。我们只要修改一下渐变线的终止坐标即可。看代码,做成水平的渐变色: 
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
效果图:
 
垂直的渐变色:
var linearGrad = context.createLinearGradient(0, 0, 0, 600);
效果图:
我们所做的不管倾斜的水平的还是垂直的，都是贯穿了整个画布，那如果我们的渐变线只指定到了画布的一部分会是什么效果呢？
我们修改一下
var linearGrad = context.createLinearGradient(0, 0, 400, 300);

效果图:

同理我们所创建的渐变线也可以超过这个画布的最大宽高。我们修改一下
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);
效果图:
 
还有我们所绘制的填充的形状也不一定占满整个画布的。我们可以任意调整自己定义的形状。这个填充的形状会在我们定义的渐变线上找到合适的填充色进而填充出来。举个例子:
context.fillRect(200, 200, 600, 400);
效果图:
 
 
 
径向渐变 :与线性渐变的区别是，径向渐变定义的是一个放射状的渐变。而这个放射状的渐变是定义在两个同心圆的基础上。而不像线性渐变是定义在两点之间的。
径向渐变也是需要两步来完成。
 
第一步 : 使用一个新的函数createRadialGradient(x0,y0,r0,x1,y1,r1); 他有6个参数。前三个参数定义第一个圆环的坐标和半径，后三个参数定义第二个圆环的坐标和半径。整个径向渐变就发生在这两个圆之间。  var radialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
 
第二步 : 和线性渐变是一样的，就不过多介绍。radialGrad.addColorStop(stop,color);
 
代码和线性渐变的代码十分类似。只不过这里使用的是createRadialGradient,我们给他传入参数createRadialGradient(300,300,0,300,300,500),前三个参数定义的是在画布中心，半径为0的一个点。后三个参数定义的是在画布中心半径为500的一个大圆。这样就定义了一个从一个点向外辐射的一个径向渐变。看一下代码
 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>径向渐变</title>

</head>

<body>

    <canvas id="canvas" style="border: 1px solid #aaa;display:block;margin:0 auto"></canvas>

</body>

</html>

<script>

    window.onload = function () {

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

        canvas.width = 600;

        canvas.height = 600;

        if (canvas.getContext("2d")) {

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

            var radialGrad = context.createRadialGradient(300, 300, 0, 300, 300, 500);

            radialGrad.addColorStop(0.0, '#fff');

            radialGrad.addColorStop(0.25, '#FB3');

            radialGrad.addColorStop(0.5, '#690');

            radialGrad.addColorStop(0.75, '#09C');

            radialGrad.addColorStop(1.0, '#000');

            context.fillStyle = radialGrad;

            context.fillRect(0, 0, 600, 600);

        } else {

            alert('您的浏览器不支持canvas,请更换浏览器尝试~')

        }

    }

</script>
效果图:
 
 
大家可以试着改变一下参数来看看会有什么不同的效果。
 
 
 

使用canvas来完成线性渐变和径向渐变的功能的更多相关文章

  1. Canvas使用渐变之-径向渐变详解

    创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1)​ 一共​六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...

  2. css3 线性渐变和径向渐变

    线性渐变:ie6以下不兼容 径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta ...

  3. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  4. CSS3_线性渐变_径向渐变----背景

    渐变的本质: 绘制一张背景图片,所以使用 background 或者 background-image background 的诸多属性,渐变都是可以使用的(repeat,position) 百分比: ...

  5. CSS3线性渐变和径向渐变

    background:linear-gradient(to top left, blue,orange);//从右下角往左上角渐变 background:radial-gradient(to top ...

  6. Css3渐变(Gradients)-径向渐变

    CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...

  7. css3渐变之径向渐变

    径向渐变由它的中心定义.可以指定渐变的中心.形状(原型或椭圆形).大小.默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthes ...

  8. CSS3渐变——径向渐变

    上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...

  9. CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)

    CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...

随机推荐

  1. T4生成整理

    将一些公用的东西弄到一个类库DM.T4里面,哪个项目需要用到t4生成的话,将DM.T4的生成事件中将dll和ModelAuto.ttinclude复制到需要使用T4的项目的生成目录下,如果这样 cop ...

  2. 只言片语 - cell 图片复用问题

    一. 今日做项目遇到图片复用问题,返回cell高度相同,由于网络不好出现图片复用,发现问题   Cell 图片加载方法如下: - (void)sd_setImageWithURL:(NSURL *)u ...

  3. 解释一下，知乎上关于C语言奇技淫巧最火的回答。

    前几天逛知乎,碰巧发现一个很火的问题. “C 语言有什么奇技淫巧?”虽然问题本身没有什么特殊的地方,但是网友的回答却是非常幽默. 下面就让我们一起来分析一下,被赞最多的答案“C 语言运算符 趋向于‘- ...

  4. Spring Cloud微服务简介

    概述 Spring Cloud给开发者提供一套按照一定套路快速开发分布式工具.它为微服务架构中涉及**配置管理,服务治理,断路器,智能路由,微代理,控制总线,全局锁,分布式会话和集群状态等操作提供了一 ...

  5. 共识协议——RAFT&PBFT

    区块链是一个没有中央权威的分布式对等系统.虽然权力下放可以防止各方的腐败行为,但是它必需要有一个可靠的共识协议来作出决策,让分散在世界各地的节点可以形成一致的意见.常见的共识算法有比特币采用的POW, ...

  6. git实战经验(很实用)

    推荐学习git很好的网站https://www.breakyizhan.com/git/216.html 以下内容,虽然编排不行,但是请认真的读下去,都是自己平时请自操作的,放心使用． 这是个人的gi ...

  7. 视频直播：Windows中各类画面源的截取和合成方法总结

    当今,视频直播技术和实时音视频技术已经是很多行业必备,典型的应用场景有教育直播.远程视频会议.互联网娱乐等.在移动端发起直播,其画面源的种类是十分有限的,无非是取摄像头.截屏等.PC端由于其系统资源充 ...

  8. Scala 学习之路（七）—— 常用集合类型之 Map & Tuple

    一.映射(Map) 1.1 构造Map // 初始化一个空map val scores01 = new HashMap[String, Int] // 从指定的值初始化Map(方式一) val sco ...

  9. yii框架widget和注册asset的例子

    yii框架是一个基于组件的框架,这样代码的重用性就非常的高,如我们想在网站的多个地方调用编辑器,这样我们就可以自定义一个组件,来供我们调用使用 下面以Ueditor组件为例: 1.下载ueditor到 ...

  10. C#—使用InstallerProjects打包桌面应用程序

    前言 打包桌面应用程序实在是一个不常使用的东西,偶尔使用起来经常会忘东忘西的耽误时间,因此,这篇文章多以图片记录过程,也是用于备忘. 下载打包工具 C#打包桌面应用程序有很多种方法,这里介绍一种使用M ...