HTML5学习笔记-绘制变形图形之绘制带阴影图形
2020-03-02 04:25
1416 查看
绘制带阴影效果的图形
在canvas上绘制带阴影效果的图形只需设置shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor属性。
shadowOffsetX,shadowOffsetY表示阴影的x,y偏移量单位像素;可以使用负值,正负偏移方向不同。
shadowBlur设置阴影模糊程度,值越大,阴影越模糊,效果与Photoshop的高斯模糊滤镜相同;shadowColor设置阴影颜色。
1 <h3>绘制阴影效果</h3> 2 <canvas id="canvas6" style="border:1px solid blue;"> 3 Your browser does not support the canvas element. 4 </canvas> 5 6 <script type="text/javascript"> 7 var c=document.getElementById('canvas6'); 8 9 if(c&&c.getContext){ 10 var context=c.getContext("2d"); 11 context.shadowOffsetX=15; 12 context.shadowOffsetY=15; 13 context.shadowBlur=10; 14 context.shadowColor='rgba(255,0,0,0.5)'; 15 context.fillStyle="#f00"; 16 context.fillRect(10,10,60,60); 17 } 18 </script>
效果如下:
2016-07-14
转载于:https://www.cnblogs.com/yunxiang-2013/p/5670040.html
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- HTML5学习笔记14-Canvas绘制渐变图形与绘制变形图形
- 学习笔记:HTML5 Canvas绘制简单图形
- HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一
- html5学习笔记二:利用canvas绘制简单图形
- HTML5 学习笔记15-Canvas图形绘制处理
- HTML5中canvas知识点详解4-绘制变形图形
- OpenCV学习笔记(六):绘制几何图形
- C# 学习笔记一(图形绘制基础1 GDI+)
- 【canvas学习笔记二】绘制图形
- 图形处理(十三)基于可变形模板的三维人脸重建-学习笔记
- 【OpenGL】学习笔记之一 绘制基本图形单元的方法
- 自定义View学习笔记04—Canvas的绘制图形
- 【Cocos2d-X开发学习笔记】第10期:渲染框架之几何图形的绘制
- 【HTML5学习笔记】31:CSS3变形效果 上
- C# 学习笔记二(图形绘制基础2 常用画图对象)
- LearnOpenGL学习笔记2:绘制基础图形
- 学习笔记6:图形绘制
- OpenCV学习笔记09--通过cvPtr2D或指针算法绘制图形
- 自定义VIEW(学习笔记三)-基本图形的绘制
- C#学习笔记之使用GDI绘制简单的图形