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

HTML5设置阴影



设置阴影涉及到4个属性


1. shadowBlur:阴影模糊度,浮点数越大越模糊。

2. shasowColor:阴影颜色。

3. shadowOffsetX: x方向的偏移

4. shadowOffsetY: y方向的偏移



代码演示:文字设置阴影


1.  复制一下index4.html,重命名为index5.html


HTML5-1.png


2. 我们删除上节课讲的实体的文字,使用剩下的空心字来做这个阴影效果


HTML5-2.png


我们先将这个y坐标改成80,先预览一下原始的效果


HTML5-3.png


设置这个阴影,我们?#37096;梢圆?#32771;一下这个API文档。阴影的属性有这么几个


HTML5-4.png


先查看这个属性:shadowBlur


HTML5-5.png


它的参数,是一个浮点值的参数。我们将它设置到代码中


ctx.shadowBlur=5.6;

b) 然后shadowColor是设置阴影的颜色。
ctx.shadowColor="#000";

c) 然后shadowOffsetX是水平方向的偏移量。
ctx.shadowOffsetX=5;

d) 然后shadowOffsetY是垂直方向的偏移量。
ctx.shadowOffsetY=5;

 

我们运行看看效果


HTML5-6.png



这样还不是太清楚,我们将shadowBlur改为1.6的值,改小一点儿。刷新浏览器


HTML5-7.png


这样的话,效果就很清楚了。向右和向下分别偏移了5个像素


这个颜色我们可以给它设置模糊程度


模糊程度就是用shadowBlur这个浮点数来指定。我们再将shadowBlur的值改为3.6,阴影就会更加模糊。


HTML5-8.png



代码演示:给矩形设置阴影


1. 设置实心的矩形,填充颜色设置为:green(绿色)


ctx.fillStyle="green";


2. 阴影模糊程度设置为4.6


ctx.shadowBlur=4.6;


3. 阴影颜色设置为橙色


ctx.shadowColor="orange";


4. 阴影水平偏移量设置为 10


ctx.shadowOffsetX=10;


5. 阴影垂直偏移量设置为5


ctx.shadowOffsetY=5;


6. 最后,在上面的一系列的属性设置好之后,我们就可以绘制矩形框了


x坐标:160;y坐标:150;宽度:100;高度:50。
ctx.fillRect(160,150,100,50);


7.  查看效果


HTML5-1.png


当然,我们这个阴影?#37096;?#20197;设成负值,比如说-10。


HTML5-2.png


查看运行效果


HTML5-3.png


这就是设置阴影的方法,所以阴影设置很简单,就这么4个属性。当然还有一点儿,可以在API上参考



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

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

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

客服热线 400-862-8862

回到顶部

闲来玩十三水规律
重庆时时彩稳赚前 19109足球彩票14场胜负推介 11选5中奖金额对照表 加拿大pc赔法 牛彩赚钱靠谱吗 大玩家彩票网 金金金吊桶论坛稳赚包六肖 江苏块3 11选五投注与中奖表 定位胆个位稳赚公式一星