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


Posted in HTML / CSS onMarch 25, 2016

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

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

阴影文字:

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

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

3D拉影效果:

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

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

边缘模糊效果文字:

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

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

程序代码:

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>    
HTML / CSS 相关文章推荐
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 #HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 #HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 #HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 #HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 #HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 #HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 #HTML / CSS
You might like
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
python实现BackPropagation算法
2017/12/14 Python
python列表的增删改查实例代码
2018/01/30 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python高级用法总结
2018/05/26 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
基于python实现把图片转换成素描
2019/11/13 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
Python集合操作方法详解
2020/02/09 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
个性发展自我评价
2014/02/11 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
上课迟到检讨书
2015/05/06 职场文书
厉行节约工作总结
2015/08/12 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android