html5实现canvas阴影效果示例_易贤网_足球游戏

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网页制作

html5实现canvas阴影效果示例

来源：易贤网阅读：651 次日期：2016-06-16 09:03:26

温馨提示：易贤网小编为您整理了“html5实现canvas阴影效果示例”,方便广大网友查阅！

在html5中实现canvas阴影效果

代码如下:

<!doctype html>

<html>

<head>

// section one - shadow and blur

context.fillstyle=black;

context.fillrect(0, 0, canvas.width, canvas.height/4);

context.font = '60pt calibri';

context.shadowcolor = white;

context.shadowoffsetx = 0;

context.shadowoffsety = 0;

context.shadowblur = 20;

context.filltext(blur canvas, 40, 80);

context.strokestyle = rgba(0, 255, 0, 1);

context.linewidth = 2;

context.stroketext(blur canvas, 40, 80);

// section two - shadow font

var hh = canvas.height/4;

context.fillstyle=white;

context.fillrect(0, hh, canvas.width, canvas.height/4);

context.font = '60pt calibri';

context.shadowcolor = rgba(127,127,127,1);

context.shadowoffsetx = 3;

context.shadowoffsety = 3;

context.shadowblur = 0;

context.fillstyle = rgba(0, 0, 0, 0.8);

context.filltext(blur canvas, 40, 80+hh);

// section three - down shadow effect

var hh = canvas.height/4 + hh;

context.fillstyle=black;

context.fillrect(0, hh, canvas.width, canvas.height/4);

for(var i = 0; i < 10; i++)

{

context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + );

context.shadowoffsetx = i*2;

context.shadowoffsety = i*2;

context.shadowblur = i*2;

context.fillstyle = rgba(127, 127, 127, 1);

context.filltext(blur canvas, 40, 80+hh);

}

// section four - fade effect

var hh = canvas.height/4 + hh;

context.fillstyle=green;

context.fillrect(0, hh, canvas.width, canvas.height/4);

for(var i = 0; i < 10; i++)

{

context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + );

context.shadowoffsetx = 0;

context.shadowoffsety = -i*2;

context.shadowblur = i*2;

context.fillstyle = rgba(127, 127, 127, 1);

context.filltext(blur canvas, 40, 80+hh);

}

for(var i = 0; i < 10; i++)

{

context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + );

context.shadowoffsetx = 0;

context.shadowoffsety = i*2;

context.shadowblur = i*2;

context.fillstyle = rgba(127, 127, 127, 1);

context.filltext(blur canvas, 40, 80+hh);

}

for(var i = 0; i < 10; i++)

{

context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + );

context.shadowoffsetx = i*2;

context.shadowoffsety = 0;

context.shadowblur = i*2;

context.fillstyle = rgba(127, 127, 127, 1);

context.filltext(blur canvas, 40, 80+hh);

}

for(var i = 0; i < 10; i++)

{

context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + );

context.shadowoffsetx = -i*2;

context.shadowoffsety = 0;

context.shadowblur = i*2;

context.fillstyle = rgba(127, 127, 127, 1);

context.filltext(blur canvas, 40, 80+hh);

}

</script>

</head>

<body>

<h1>html5 canvas</h1>

<pre>fill and stroke clip</pre>

</div>

</body>

</html>

中国足彩网信息请查看网页制作

上一篇：dreamweaver使用通配符批量替换某个div

下一篇：html中实现文本框出现提示功能的多种方法

易贤网手机网站地址：html5实现canvas阴影效果示例

由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！

足球游戏_中国足彩网￥体育资讯$