闲来玩十三水规律|十三水马牌赢了怎么算|

HTML5线性渐变



HTML5支持的填充有3种渐变


1. 一种叫线性渐变

 

? 线性渐变

– CanvasGradient代表渐变填充

– CanvasPattern代表位团填充


? 使用渐变步骤

– step1:ctx.createLinearGradient(x,y,xend,yend)返回CavasGradient对象

– step2:调用CanvasGradient对象的addColorStop(offset,color)向线性渐变中填加颜色,offset值在0-1之间

– step3:将CanvasGradient对象?#25345;?#32473;xtx.fillStyle或strokeStyle属性

 

2. 一种?#24615;?#24418;渐变


3. 还有一种叫图案填充




如何使用线性渐变


1. 第一步,我们调用ctx的createLinearGradient(x,y,xend,yend)方法,用这个方法返回一个CavasGradient对象。


2. 第二步,我们在这个对象(CavasGradient)?#26174;?#21152;一个颜色,增加多个渐变的颜色,使用addColorStop(offset,color)方法。


但是注意这里面有一个参数:offset,就是偏移量,你增加颜色再什么地方。线性,它有起始点和终止点,这个offset参数是0到1之间的一个浮点数。第二个参数自然就是想要添加的颜色了。


3. 第三步,加上颜色?#38498;螅?#25105;们可以指定fillStyle或strokeStyle属性,?#39068;?#20010;填充成我们创建的CavasGradient对象。

 


查看HTML5参考手册


1. 用这个方法产生的是一个线性的渐变。


HTML5-1.png


2. 用这个方法产生的是一个图案的填充。


HTML5-2.png


3. 这个产生一个圆形渐变。


HTML5-3.png


4. 这个方法是增减渐变的颜色的。


HTML5-4.png



代码演示:如何使用线性渐变


1) 首先,我们给它一个颜色,然后绘制矩形,正常情况下,是这样的

HTML5-6.png


运行


HTML5-7.png


2) 那?#27425;?#20204;要让这个矩形渐变。先?#39068;?#20010;矩形变大一点儿,参数修改一下。


HTML5-8.png


运行效果:


HTML5-9.png


3) 然后我们来给这个矩形实现渐变


1) 我们首先使用第一个方法,叫:createLinearGradient。我们调用这个方法,返回一个对象,定义一个变量来接收它。


HTML5-10.png


2) 然后我们使用addColorStop方法来添加渐变的颜色。这里添加3个渐变点。可以使用颜色的单词,?#37096;?#20197;使用16进制表示的颜色。


HTML5-11.png


3) 然后这里我们之前忘记了指定线性渐变的方向了,把它添加上,从坐标点0,0到200,85。


HTML5-12.png


4) 然后,?#39068;?#20010;fillStyle填充的颜色修改为这个gred的对象。


HTML5-13.png


5) 浏览器运行一下


HTML5-14.png



矩形线性渐变解析


1) 相当于,首先我们这个ctx得到一个线性渐变。这个线性渐变是从0,0开始;到200,85结束,这样的一条线。


2) 这个线在0.3的位置加了一条灰色,大概在这里加了一个灰色。


HTML5-15.png


3) 然后在0.6的地方,加了一个接近于黑色的颜色。



HTML5-16.png


所以这个地方你会发现是淡灰色到深灰色的这样一个渐变。


4) 然后在0.9的地?#25509;?#21152;了一个orange(橙色)。


HTML5-17.png


所以最?#31449;统?#29616;了这样的一个渐变效果。我们在这条线上可以增加很多点。


5) 当然,我们?#37096;?#20197;做这样的一个渐变。


HTML5-18.png


起始点是0,0;结束点是200,0。?#37096;?#20197;在这条线上加渐变颜色。这是我们的线性渐变。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
? 2012-2016 www.znlucv.tw
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部

闲来玩十三水规律
3d走势图专业版的 加拿大28龙虎玩法 重庆时时彩计划分析软件下载 排列三5码组六遗漏 英国·幸运五星彩 时时彩每天稳赚100 时时彩稳赢技巧7年心得 总和大小连出几把 免费的幸运飞艇计划软件哪个好 快三五百块钱求大神带我回血