• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    实例讲解使用HTML5 Canvas绘制阴影效果的方法

    创建阴影效果需要操作以下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;  

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

    阴影文字:

    只要设置shadowOffsetX与shadowOffsetY的值,当值都正数时,阴影相对文字的右下

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

    3D拉影效果:

    在同一位置不断的重复绘制文字同时改变shadowOffsetX、shadowOffsetY、shadowBlur

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

    边缘模糊效果文字:

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

    运行效果:

    程序代码:

    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>    
    上一篇:借助HTML5 Canvas API制作一个简单的猜字游戏
    下一篇:详解HTML5 Canvas绘制时指定颜色与透明度的方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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