实例讲解使用HTML5 Canvas绘制阴影效果的方法
程序员文章站
2023-11-28 23:32:58
这篇文章主要介绍了使用HTML5 Canvas绘制阴影效果的方法,包括一个3D拉影+边缘模糊效果文字的编写例子,在阴影效果的利用上进一步深入,需要的朋友可以参考下... 16-03-25...
创建阴影效果需要操作以下4个属性:
1.context.shadowcolor:阴影颜色。
2.context.shadowoffsetx:阴影x轴位移。正值向右,负值向左。
3.context.shadowoffsety:阴影y轴位移。正值向下,负值向上。
4.context.shadowblur:阴影模糊滤镜。数据越大,扩散程度越大。
这四个属性只要设置了第一个和剩下三个中的任意一个就有阴影效果。不过通常情况下,四个属性都要设置。
例如,创建一个向右下方位移各5px的红色阴影,模糊2px,可以这样写。
javascript code复制内容到剪贴板
- context.shadowcolor = "red";
- context.shadowoffsetx = 5;
- context.shadowoffsety = 5;
- context.shadowblur= 2;
需要注意的是,这里的阴影同其他属性设置一样,都是基于状态的设置。因此,如果只想为某一个对象应用阴影而不是全局阴影,需要在下次绘制前重置阴影的这四个属性。
运行结果:
阴影文字:
只要设置shadowoffsetx与shadowoffsety的值,当值都正数时,阴影相对文字的右下
方偏移。当值都为负数时,阴影相对文字的左上方偏移。
3d拉影效果:
在同一位置不断的重复绘制文字同时改变shadowoffsetx、shadowoffsety、shadowblur
的值,从小到大不断偏移不断增加,透明度也不断增加。就得到了拉影效果文字。
边缘模糊效果文字:
在3d拉影效果的基础上在四个方向重复,就得到了边缘羽化的文字效果。
运行效果:
程序代码:
javascript code复制内容到剪贴板
- <!doctype html>
- <html>
- <head>
- <meta http-equiv="x-ua-compatible" content="chrome=ie8">
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title>canvas clip demo</title>
- <link href="default.css" rel="stylesheet" />
- <script>
- var ctx = null; // global variable 2d context
- var imagetexture = null;
- window.onload = function() {
- var canvas = document.getelementbyid("text_canvas");
- console.log(canvas.parentnode.clientwidth);
- canvas.width = canvas.parentnode.clientwidth;
- canvas.height = canvas.parentnode.clientheight;
- if (!canvas.getcontext) {
- console.log("canvas not supported. please install a html5 compatible browser.");
- return;
- }
- var context = canvas.getcontext('2d');
- // 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 clip demo - by gloomy fish</h1>
- <pre>fill and stroke clip</pre>
- <div id="my_painter">
- <canvas id="text_canvas"></canvas>
- </div>
- </body>
- </html>
上一篇: 用文本文件制作留言板提示(上)
推荐阅读
-
实例讲解使用HTML5 Canvas绘制阴影效果的方法
-
HTML5 Canvas阴影使用方法实例演示
-
HTML5里的placeholder属性使用实例和美化显示效果的方法
-
使用HTML5的Canvas绘制曲线的简单方法
-
实例讲解使用HTML5 Canvas绘制阴影效果的方法
-
使用HTML5 Canvas绘制直线或折线等线条的方法讲解_html5教程技巧
-
HTML5 Canvas阴影使用方法实例演示_html5教程技巧
-
使用HTML5 Canvas API中的clip()方法裁剪区域图像代码实例
-
HTML5 Canvas API中drawImage()方法的使用实例_html5教程技巧
-
实例讲解使用HTML5 Canvas绘制阴影效果的方法_html5教程技巧