来源:自学PHP网 时间:2018-02-08 09:56 作者: 阅读:次
[导读] HTML5 Canvas渐变是一种用于填充或描边图形的颜色模式。渐变色是由不同的颜色进行过渡,而不是单一的颜色。渐变按照类型来分分为线性渐变和径向渐变。...
渐变是一种用于填充或描边图形的颜色模式。渐变色是由不同的颜色进行过渡,而不是单一的颜色。先来看几个canvas渐变色的例子: 渐变按照类型来分可以分为两种类型:
线性渐变以线性的模式来改变颜色,也就是水平,垂直或对角方向。 径向渐变以圆形模式来改变颜色,颜色以圆形的中心向外辐射。 正如前面所说,线性渐变以线性的模式来改变颜色。我们可以通过2D上下文的 var canvas = document.getElementById("ex1"); var context = canvas.getContext("2d"); var x1 = 0; var y1 = 0; var x2 = 100; var y2 = 0; var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);
水平的线性渐变仅仅是水平方向的参数值(x1和x2)不同,例如: var x1 = 0; var y1 = 0; var x2 = 100; var y2 = 0; var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2); 垂直的线性渐变仅仅是垂直方向的参数值(y1和y2)不同,例如: var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 100; var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2); 一个对角线的线性渐变水平和垂直方向上的参数都不相同,例如: var x1 = 0; var y1 = 0; var x2 = 100; var y2 = 100; var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2); 在上面的例子中,并没有指明线性渐变使用什么颜色。为了指明使用什么渐变颜色,可以在渐变对象上使用 var linearGradient1 = context.createLinearGradient(0,0,100,0); linearGradient1.addColorStop(0, 'rgb(255, 0, 0)'); linearGradient1.addColorStop(1, 'rgb( 0, 0, 0)');
在上面的例子中为渐变添加了两种颜色。第一种颜色是红色,设置在渐变的开始处。第二种颜色是黑色,设置在渐变的结束处。 你可以添加通过 var linearGradient1 = context.createLinearGradient(0,0,100,0); linearGradient1.addColorStop(0 , 'rgb(255, 0, 0)'); linearGradient1.addColorStop(0.5, 'rgb( 0, 0, 255); linearGradient1.addColorStop(1 , 'rgb( 0, 0, 0)'); 上面的代码在渐变的中间添加了一个蓝色。整个渐变将平滑的从红色过渡到蓝色,在过渡到黑色。 你可以使用渐变来填充或描边图形。要填充或描边图形可以通过2D上下文的 var linearGradient1 = context.createLinearGradient(0,0,100,0); linearGradient1.addColorStop(0 , 'rgb(255, 0, 0)'); linearGradient1.addColorStop(0.5, 'rgb( 0, 0, 255); linearGradient1.addColorStop(1 , 'rgb( 0, 0, 0)'); context.fillStyle = linearGradient1; context.strokeStyle = linearGradient1; 通过 现在我们可以为图形填充渐变色或描边渐变色。下面是一个例子,一个矩形的填充渐变色和一个矩形的描边渐变色。 var canvas = document.getElementById("ex2"); var context = canvas.getContext("2d"); var linearGradient1 = context.createLinearGradient(0,0,100,0); linearGradient1.addColorStop(0 , 'rgb(246, 36, 89)'); linearGradient1.addColorStop(0.5, 'rgb( 31, 58, 147)'); linearGradient1.addColorStop(1 , 'rgb( 34, 49, 63)'); context.fillStyle = linearGradient1; context.fillRect(10,10,100, 100); var linearGradient2 = context.createLinearGradient(125,0, 225,0); linearGradient2.addColorStop(0 , 'rgb(255, 0, 0)'); linearGradient2.addColorStop(0.5, 'rgb( 0, 0, 255)'); linearGradient2.addColorStop(1 , 'rgb( 0, 0, 0)'); context.strokeStyle = linearGradient2; context.strokeRect(125, 10, 100, 100); 我们在使用渐变的时候要非常明白的知道渐变的长度的概念。如果我们设置渐变从 距离来说,加入有一个水平线性渐变, 具体来看下面的代码,这里绘制了5个矩形,并用上面所说的渐变来填充它们,让我们蓝看看效果: var linearGradient1 = context.createLinearGradient(150, 0, 350,0); linearGradient1.addColorStop(0, 'rgb(0, 0, 255)'); linearGradient1.addColorStop(1, 'rgb(0, 255, 0)'); context.fillStyle = linearGradient1; context.fillRect(10,10,130, 100); context.fillRect(150,10, 200, 100); context.fillRect(360,10, 130, 100); context.fillRect(100,120, 150, 100); context.fillRect(280,120, 150, 100); 从上面的结果可以看出,在渐变区域之外的图形仅会使用开始或结束颜色来填充。 渐变长度是非常重要的概念,需要大家仔细体会。只有掌握它才能在使用渐变是获得正确的结果。 径向渐变是一种圆形的颜色扩展模式,颜色从圆心位置开始向外辐射。下面是一个例子: 一个径向渐变于两个圆形来定义。每一个圆都有一个圆心和一条半径。下面是示例代码: var x1 = 100; // 第一个圆圆心的X坐标 var y1 = 100; // 第一个圆圆心的Y坐标 var r1 = 30; // 第一个圆的半径 var x2 = 100; // 第二个圆圆心的X坐标 var y2 = 100; // 第二个圆圆心的Y坐标 var r2 = 100; // 第二个圆的半径 var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2); radialGradient1.addColorStop(0, 'rgb(0, 0, 255)'); radialGradient1.addColorStop(1, 'rgb(0, 255, 0)'); context.fillStyle = radialGradient1; context.fillRect(10,10, 200, 200); 如上面的代码所示,这里有两个圆,圆心分别为 这两个圆必须设置不同的半径,形成一个内圆和一个外圆。这样渐变色就从一个圆形辐射到另一个圆形。 颜色停止点会被添加到这两个圆形之间,例如上面的代码中,第一个颜色停止点中的参数0表示该颜色从第一个圆形开始,第二个颜色停止点中的参数1表示第二种颜色从第二个圆形开始。 下面是上面代码的返回结果: 如果两个圆形的圆心位置相同,那么径向渐变将是一个完整的圆形。如果两个圆的圆心位置不相同,那么径向渐变看起来就像是一个探照灯发出的光线。例如下面的样子: var x1 = 100; var y1 = 100; var r1 = 30; var x2 = 150; var y2 = 125; var r2 = 100; var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2); radialGradient1.addColorStop(0, 'rgb(0, 0, 255)'); radialGradient1.addColorStop(1, 'rgb(0, 255, 0)'); context.fillStyle = radialGradient1; context.fillRect(10,10, 200, 200); 得到的结构如下所示: |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com