当前位置： 移动技术网 > IT编程>网页制作>Html5 > 实例讲解使用HTML5 Canvas绘制阴影效果的方法

实例讲解使用HTML5 Canvas绘制阴影效果的方法

2019年07月25日  | 移动技术网IT编程  | 我要评论

创建阴影效果需要操作以下4个属性：

1.context.shadowcolor：阴影颜色。
2.context.shadowoffsetx：阴影x轴位移。正值向右，负值向左。
3.context.shadowoffsety：阴影y轴位移。正值向下，负值向上。
4.context.shadowblur：阴影模糊滤镜。数据越大，扩散程度越大。
这四个属性只要设置了第一个和剩下三个中的任意一个就有阴影效果。不过通常情况下，四个属性都要设置。

例如，创建一个向右下方位移各5px的红色阴影，模糊2px，可以这样写。

javascript code复制内容到剪贴板
  1. context.shadowcolor = "red";   
  2. context.shadowoffsetx = 5;   
  3. context.shadowoffsety = 5;   
  4. context.shadowblur= 2;  

需要注意的是，这里的阴影同其他属性设置一样，都是基于状态的设置。因此，如果只想为某一个对象应用阴影而不是全局阴影，需要在下次绘制前重置阴影的这四个属性。
运行结果：
2016325110954383.jpg (850×500)

阴影文字：

只要设置shadowoffsetx与shadowoffsety的值，当值都正数时，阴影相对文字的右下

方偏移。当值都为负数时，阴影相对文字的左上方偏移。

3d拉影效果：

在同一位置不断的重复绘制文字同时改变shadowoffsetx、shadowoffsety、shadowblur

的值，从小到大不断偏移不断增加，透明度也不断增加。就得到了拉影效果文字。

边缘模糊效果文字：

在3d拉影效果的基础上在四个方向重复，就得到了边缘羽化的文字效果。

运行效果：
2016325111023538.jpg (472×470)

程序代码：

javascript code复制内容到剪贴板
  1. <!doctype html>     
  2. <html>     
  3. <head>     
  4. <meta http-equiv="x-ua-compatible" content="chrome=ie8">     
  5. <meta http-equiv="content-type" content="text/html;charset=utf-8">     
  6. <title>canvas clip demo</title>     
  7. <link href="default.css" rel="stylesheet" />     
  8.     <script>     
  9.         var ctx = null; // global variable 2d context     
  10.         var imagetexture = null;     
  11.         window.onload = function() {     
  12.             var canvas = document.getelementbyid("text_canvas");     
  13.             console.log(canvas.parentnode.clientwidth);     
  14.             canvas.width = canvas.parentnode.clientwidth;     
  15.             canvas.height = canvas.parentnode.clientheight;     
  16.                  
  17.             if (!canvas.getcontext) {     
  18.                 console.log("canvas not supported. please install a html5 compatible browser.");     
  19.                 return;     
  20.             }     
  21.             var context = canvas.getcontext('2d');     
  22.                  
  23.             // section one - shadow and blur     
  24.             context.fillstyle="black";     
  25.             context.fillrect(0, 0, canvas.width, canvas.height/4);     
  26.             context.font = '60pt calibri';     
  27.                  
  28.             context.shadowcolor = "white";     
  29.             context.shadowoffsetx = 0;     
  30.             context.shadowoffsety = 0;     
  31.             context.shadowblur = 20;     
  32.             context.filltext("blur canvas", 40, 80);     
  33.             context.strokestyle = "rgba(0, 255, 0, 1)";     
  34.             context.linewidth = 2;     
  35.             context.stroketext("blur canvas", 40, 80);     
  36.                  
  37.             // section two - shadow font     
  38.             var hh = canvas.height/4;     
  39.             context.fillstyle="white";     
  40.             context.fillrect(0, hh, canvas.width, canvas.height/4);     
  41.             context.font = '60pt calibri';     
  42.                  
  43.             context.shadowcolor = "rgba(127,127,127,1)";     
  44.             context.shadowoffsetx = 3;     
  45.             context.shadowoffsety = 3;     
  46.             context.shadowblur = 0;     
  47.             context.fillstyle = "rgba(0, 0, 0, 0.8)";     
  48.             context.filltext("blur canvas", 40, 80+hh);     
  49.                  
  50.             // section three - down shadow effect     
  51.             var hh = canvas.height/4 + hh;     
  52.             context.fillstyle="black";     
  53.             context.fillrect(0, hh, canvas.width, canvas.height/4);     
  54.             for(var i = 0; i < 10; i++)     
  55.             {     
  56.                 context.shadowcolor = "rgba(255, 255, 255," + ((10-i)/10) + ")";     
  57.                 context.shadowoffsetx = i*2;     
  58.                 context.shadowoffsety = i*2;     
  59.                 context.shadowblur = i*2;     
  60.                 context.fillstyle = "rgba(127, 127, 127, 1)";     
  61.                 context.filltext("blur canvas", 40, 80+hh);     
  62.             }     
  63.                  
  64.             // section four -  fade effect     
  65.             var hh = canvas.height/4 + hh;     
  66.             context.fillstyle="green";     
  67.             context.fillrect(0, hh, canvas.width, canvas.height/4);     
  68.             for(var i = 0; i < 10; i++)     
  69.             {     
  70.                 context.shadowcolor = "rgba(255, 255, 255," + ((10-i)/10) + ")";     
  71.                 context.shadowoffsetx = 0;     
  72.                 context.shadowoffsety = -i*2;     
  73.                 context.shadowblur = i*2;     
  74.                 context.fillstyle = "rgba(127, 127, 127, 1)";     
  75.                 context.filltext("blur canvas", 40, 80+hh);     
  76.             }     
  77.             for(var i = 0; i < 10; i++)     
  78.             {     
  79.                 context.shadowcolor = "rgba(255, 255, 255," + ((10-i)/10) + ")";     
  80.                 context.shadowoffsetx = 0;     
  81.                 context.shadowoffsety = i*2;     
  82.                 context.shadowblur = i*2;     
  83.                 context.fillstyle = "rgba(127, 127, 127, 1)";     
  84.                 context.filltext("blur canvas", 40, 80+hh);     
  85.             }     
  86.             for(var i = 0; i < 10; i++)     
  87.             {     
  88.                 context.shadowcolor = "rgba(255, 255, 255," + ((10-i)/10) + ")";     
  89.                 context.shadowoffsetx = i*2;     
  90.                 context.shadowoffsety = 0;     
  91.                 context.shadowblur = i*2;     
  92.                 context.fillstyle = "rgba(127, 127, 127, 1)";     
  93.                 context.filltext("blur canvas", 40, 80+hh);     
  94.             }     
  95.             for(var i = 0; i < 10; i++)     
  96.             {     
  97.                 context.shadowcolor = "rgba(255, 255, 255," + ((10-i)/10) + ")";     
  98.                 context.shadowoffsetx = -i*2;     
  99.                 context.shadowoffsety = 0;     
  100.                 context.shadowblur = i*2;     
  101.                 context.fillstyle = "rgba(127, 127, 127, 1)";     
  102.                 context.filltext("blur canvas", 40, 80+hh);     
  103.             }     
  104.         }     
  105.              
  106.     </script>     
  107. </head>     
  108. <body>     
  109.     <h1>html5 canvas clip demo - by gloomy fish</h1>     
  110.     <pre>fill and stroke clip</pre>     
  111.     <div id="my_painter">     
  112.         <canvas id="text_canvas"></canvas>     
  113.     </div>     
  114. </body>     
  115. </html>    

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网