CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解 | 您所在的位置:网站首页 › html设置背景颜色渐变 › 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));效果图如下:
大家注意这个重复渐变,意思是当渐变不能够撑起整个容器之后,那么就可以这样重复渐变染后装满整个容器,用的应该不多。 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; }效果图如下: 我们将closest-side改成 farthest-side以后效果图如下: 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); }) 效果图如下
好了,那么这次的渐变就分享到这个地方,谢谢大家的收看,不介意的话就帮我点个赞吧,哈哈。 如有错误请评论指正,将会及时修改。 |
CopyRight 2018-2019 实验室设备网 版权所有 |