您的位置:首页 > Web前端 > HTML5

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

  • 点赞
  • 收藏
  • 分享
  • 文章举报
aibi7414 发布了0 篇原创文章 · 获赞 0 · 访问量 31 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: