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

HTML5圆形渐变



代码演示:如何使用圆形渐变


我们查看一下这个API文档,这里详细解释了创建圆形渐变的方法的几个参数。


HTML5-1.png


我们写代码为:


HTML5-2.png


运行看看结果


HTML5-3.png




圆形渐变的原理


1) 它产生的这个圆,第一个圆心是70,50。


假如这个坐标点在这儿:


HTML5-4.png


这个半径是5,这就是第一个圆。


HTML5-5.png


2) 那第二个圆的圆心是90,60。


假如圆心在这里。


HTML5-6.png


它的半径是100,就是这样的一个圆。


HTML5-7.png


3) 这样的话,就是这两个圆形之间的渐变了。


HTML5-8.png


线性渐变是一条线上增加多个渐变点,现在呢!是在这个圆的半径上增加渐变点。



我们再做一个规则的渐变效果


比如我们要画一个圆的渐变。


1) 我们先画一个圆形


因为这是一个路径,所以我们要先使用beginPath方法开启一个新的路径。然后是路径的绘制。


HTML5-9.png


然后在画完之后使用closePath方法关闭一个路径。


2) 我们绘制的这个圆是这样的


圆心坐标是:200,200;半径是:80;开始角度是:0;结束角度是:2*Math.PI。


HTML5-10.png


3) 在绘制了这个路径之后,我们再把这个圆填充出来


就是使用fillStyle方法,先给一个红色,待会儿再把它改成渐变色。然后使用fill填充一下。


HTML5-11.png


运行效果


HTML5-12.png


4)现在给这个圆加一个渐变


a) 首先就需要得到一个渐变的对象。
然后设置它的第一个圆圆心坐标:200,200;半径:5;设置第二个圆的圆心坐标:200,200;半径:80。(这个的半径不能超过圆的半径)


HTML5-13.png 


b) 然后我们给这个对象grd2添加一个颜色。
第一个颜色是:白色(#fff);
第二个颜色是:红色(#f00);


c) 然后,我们改变fillStyle的值为grd2这个对象。


HTML5-14.png



刷新浏览器,效果如下:


HTML5-15.png



填充图案的createPattern方法


看一下这里给的例子


var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=document.getElementById("lamp");

var pat=ctx.createPattern(img,"repeat");

ctx.rect(0,0,150,100);

ctx.fillStyle=pat;

ctx.fill();

 

1) 首先是ctx.createPattern(img,"repeat")


第一个参数是一个图片;
第二个参数:repeat就是横向纵向都重叠。


2) 然后这里填充了一个矩形


ctx.rect(0,0,150,100);

 

3) 设定fillStyle等于pat


ctx.fillStyle=pat;

这个style就是填充的图案。



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

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

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

客服热线 400-862-8862

回到顶部

闲来玩十三水规律
时时彩后二50注万能码 双色球拖胆是什么意思 9号彩票手机app 彩票双面盘科学 彩名堂正式版 双色球怎么买比较划算 下载51幸运时时彩人工计划 分快3计划软件 彩票计划app免费下载 北京pk计划群软件