使用HTML5画布(canvas)生成阴影效果
2024-09-29 16:07:06
来源:GBin1.com
使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影。
var canvas = document.getElementById('shadowcanvas');
var ctx = canvas.getContext('2d'); ctx.save();
ctx.fillStyle = '#EB852A';
ctx.shadowOffsetX = 15; // 阴影Y轴偏移
ctx.shadowOffsetY = 15; // 阴影X轴偏移
ctx.shadowBlur = 14; // 模糊尺寸
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 颜色 ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore(); ctx.fillStyle = '#222222';
ctx.beginPath();
ctx.arc(350, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
这段代码中,我们首先得到画布并取得context,调用方法添加阴影相关属性,包括了偏移,模糊和阴影颜色。最后调用canvas方法生成图形,这里我们为了更好的对比效果,分别生成了2个圆形,一个包含阴影,一个不包含阴影。
注意:以上阴影属性,至少得设置颜色和模糊度。
运行代码:
GBdebug在线调试地址:http://www.gbin1.com/gb/debug/5b6fd9cb-6bdf-4a7f-8f20-4ea73bf9ae76.htm
希望这个小技巧能帮助大家生成更酷的画布效果。
via 极客社区
最新文章
- OpenCV的数据类型---Cv
- UI:MVC设计模式
- [Objective-c 基础 - 2.11] SEL数据类型
- 数据存储与访问之——初见SQLite数据库
- c/cpp语言链表连接部分详解
- Linux Android 多点触摸协议 原文出自【比特网】,转载请保留原文链接:http://soft.chinabyte.com/os/71/12306571.shtml
- WebSocket+Java 私聊、群聊实例
- Sqoop+mysql+Hive+ Ozzie数据仓库案例
- OSLab课堂作业2
- ehci ohci 驱动逻辑
- 模仿VIMD的模式的简化代码示例
- [Training Video - 1] [Selenium Basics] [Xpath Selenium]
- redis常用配置参数解析
- 【动态规划】mr354-坐车看球
- 自己亲自写的两本linux资料,免费下载,pdf文档
- 推荐一本迷你中文书《JavaScript Promise迷你书(中文版)》
- 交换两个变量的值不使用第三个变量(Java)
- cms-帖子静态化
- 四、服务器上的 Git
- 3、nio中的selector使用
热门文章
- 4.Spark Streaming事务处理
- php api接口校验规则示例
- PTA L2-004 这是二叉搜索树吗?-判断是否是对一棵二叉搜索树或其镜像进行前序遍历的结果 团体程序设计天梯赛-练习集
- 洛谷 P1352 没有上司的舞会【树形DP/邻接链表+链式前向星】
- 在class中获取web资源
- 解决在jqmobi框架上使用mobiscroll控件的bug问题
- java-多线程-一道阿里面试题分析
- 【BZOJ 4650】【UOJ #219】【NOI 2016】优秀的拆分
- Bootstrap-table固定表头并解决表头与内容不对齐
- [转]Java五个最常用的集合类之间的区别和联系