CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
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里面的径向渐变是一个圆渐变为另一个圆，这就要区分两个圆的圆心的位置，判断两个圆是否相交或者不相交，这样的渐变效果就会变得不同，最要注意的一点就是渐变是一第一个圆心到第二个圆的渐变，切记是第二个圆，不是渐变到第二个圆的圆心，只要注意这点就好，其他情况我这里就不多做解释了，大家自行尝试，我这里仅有两个圆圆心一样的情况，因此大家就会看到如上图一样的有规律的向外渐变。
好了，那么这次的渐变就分享到这个地方，谢谢大家的收看，不介意的话就帮我点个赞吧，哈哈。
如有错误请评论指正，将会及时修改。