CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解

大家好，又见面了，感觉我上一篇博客对部分同学都挺有帮助的，于是我决定继续写下去，会继续的解析知识点让大家更容易理解，希望能给大家带来帮助，愿意一起学习的可以关注我。
那么今天我要和大家分享的是c3和h5的两个渐变的新特性，大家都知道随着c3和h5的更新，网页上能够实现的特效越来越多，特效也更加的炫酷多彩，那么这些知识点基本上也成为了前端工程师必然要了解的一些内容，那么你知道的更多你的薪资也会越来越高，层次也会逐渐提升，那么废话不多说，我们进入今天的主题。

CSS3渐变效果的实现

我们从css3的渐变开始说起，这样关于Canvas背景的渐变将会更加的容易理解，因为Canvas的背景渐变要比c3渐变要简单许多，更加容易实现。

linear-gradient 线性渐变

下面是线性渐变的实现格式：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

大家首先要注意的一点，css3的渐变是实现在background-image里面的，是它的一个属性，在同一个块下面是不能够同时实现渐变和背景图片的，后面的代码将会覆盖前面的代码，以至于前面的代码不能够实现。
direction 这个单词的意思相信大家都清楚，是方向的意思，那么就很简单了;如to left，to right，to top，to bottom，当然他们还可以组合使用，例如to left top,这样就可以控制渐变的方向，当然to代表是向哪里渐变，例如to top是向上渐变，如果你没有设置它的方向，那么它是默认向上渐变的。那么它的值其实还可以设置角度例如60deg
假设整个块标签是一个正方形，那么它里面的渐变方向将会顺时针旋转60deg，这样也会更利于我们做出更好看的效果。在这之后的其他参数便是渐变的颜色，按照自己喜欢的顺序填写。
如果你需要实现颜色渐变虚化的效果，那么你就必须在颜色参数部分填写rgba，如下例：

渐变虚化实例

background-image: linear-gradient(to right,rgba(255,0,0,1),rgba(255,0,0,0));

效果图如下：

渐变虚化
有空白的边框是因为未重置浏览器样式，相信如果了解过的都会知道，这里就不做多讲。

repeating-linear-gradient() 函数用于重复线性渐变：

#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

大家注意这个重复渐变，意思是当渐变不能够撑起整个容器之后，那么就可以这样重复渐变染后装满整个容器，用的应该不多。

radial-gradient 径向渐变

下面是径向渐变的代码实现格式：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

径向渐变其实就是围绕一个圆发生的渐变，仔细看radial-gradient当中的参数，可以填写shape形状，size大小和position位置；

position 的值有两个，实际上就是这个径向渐变在这个块中的位置，我们常用百分号去设置，当然也可以直接使用px来设置，注意设置的是渐变中心的位置；

shape 的值为circle和ellipse，默认情况下是ellipse；

size 表达的是渐变范围,它常有以下四个值：

closest-side 靠近容器最近的边
farthest-side 靠近容器最远的边
closest-corner 靠近容器最近的角
farthest-corner 靠近容器最远的角（注意这里的角是角落不是角度）

那么这里可能就会有些同学搞不懂了，就会有一些比较大的疑问，那么下面我给你们举个例子你就明白了；

size属性实例讲解

我们这边设置一个宽200px，高100px的div，然后设置径向渐变closest-side，其实它的意思是当靠近容器最近的一条边的时候就停止渐变，这里其实表达的是一个渐变范围

div{
	background-image: radial-gradient(closest-side circle at 90% 50%,red,green);
	height: 100px;
	width: 200px;
}

效果图如下：
在这里插入图片描述
大家很明显的看到，我之前设置的x轴的position为90%，已经非常靠近右边的边界了，所以你看它在靠近右边边界的时候就停止了渐变，因此它表现的非常小。这里再解释一下之所以后面为什么有那么大一块绿色，是因为它自动做了一个颜色的填充，并不是绿色的没有渐变；

我们将closest-side改成 farthest-side以后效果图如下：
在这里插入图片描述
那么大家很明显的看到，渐变变得非常大了，因为它的结束边界是容器的左边，这样的话大家应该都很清楚了。
这样的话closest-corner和farthest-corner我也就不多讲了，***注意这里的角是角落不是角度***须知一个长方形，一个块有四个角落左上，左下，右上，右下，最远角落和最近角落，指的是其中的某一个，到达它之后就停止渐变。

repeating-radial-gradient() 函数用于重复径向渐变：

OK，既然线性渐变有重复渐变，那么径向渐变也有重复渐变，这里的话我就不多做解释，使用方法耶简单，我把代码格式沾在下面：

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

这里的话我再补充一个知识点，就是在颜色的后面可以添加范围，常用的是百分号，既然是范围，当然也可以使用px;
注意后面的范围是该颜色渐变的结束位置。

例如：

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

这里的黄色渐变占10%，绿色渐变沾15%-10%=5%；

那么这里的css3渐变，讲到这里，下面我们继续Canvas画布的背景渐变，因为都是渐变所以这两个我们放在一起；

Canvas画布背景渐变

createLinearGradient(x1,y1,x2,y2) 方法创建线性的渐变对象。

里面有四个参数，很简单，就是渐变开始的坐标和渐变结束的坐标
我们直接看代码和注释你们就了解了

//使用了jquery
	$(function(){
		var canvas = $('canvas')[0];//获取canvas
		var item = canvas.getContext('2d');//获取上下文对象
		style = item.createLinearGradient(0,0,100,0);//根据参数创建线性渐变对象
		style.addColorStop(0,'red');//设置渐变范围和渐变的颜色，当然中间我们还可以设置许多的颜色
		style.addColorStop(1,'white');
		item.fillStyle = style;//设置填充渐变
		item.fillRect(0,0,100,100);//画出填充矩形
	})

效果图如下

在这里插入图片描述

其实看完代码，大家就会觉得很简单，比css3的渐变要简单许多，但是各有优势。

createRadialGradient(x1，y1，r1，x2，y2，r2) 方法创建放射状/圆形渐变对象

其实在canvas中这两个渐变都差不多，我们就住要理解一下参数
主要是渐变开始圆的圆心的坐标和半径和渐变结束圆的圆心的坐标和半径；

//这里的代码基本和上面的相同，具体注释请参照上面
	$(function(){
		var canvas = $('canvas')[0];
		var item = canvas.getContext('2d');
		style = item.createRadialGradient(100,100,20,100,100,100);
		style.addColorStop(0,'red');
		style.addColorStop(1,'white');
		item.fillStyle = style;
		item.fillRect(0,0,200,200);
	})

效果图如下

在这里插入图片描述
大家要注意一点，就是canvas里面的径向渐变是一个圆渐变为另一个圆，这就要区分两个圆的圆心的位置，判断两个圆是否相交或者不相交，这样的渐变效果就会变得不同，最要注意的一点就是渐变是一第一个圆心到第二个圆的渐变，切记是第二个圆，不是渐变到第二个圆的圆心，只要注意这点就好，其他情况我这里就不多做解释了，大家自行尝试，我这里仅有两个圆圆心一样的情况，因此大家就会看到如上图一样的有规律的向外渐变。