使用HTML5画布(canvas)生成阴影效果
代码:
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
希望这个小技巧能帮助大家生成更酷的画布效果。
【使用HTML5画布(canvas)生成阴影效果】相关文章
2. 使用HTML5画布实现的超棒javascript动画仪表板:gauge.js
6. HTML5画布下js的文字云/标签云效果 - D3 Cloud
9. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
10. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
本文来源:https://www.51html5.com/a689.html
﹝使用HTML5画布(canvas)生成阴影效果﹞相关内容
- CSS3 HTML5实例三(块阴影与文字阴影)
- CSS Transition (CSS过渡效果)入门
- 用HTML5画一个3D的三角形网格
- 使用HTML5+JavaScript生成的一款儿时的经典游戏
- 割绳子(Cut The Rope)游戏HTML5版背后的开发故事
- 精灵战争(Wizard Wars)
- 13个风格独特的关于页面(About Pages)设计
- CSS3 box-shadow实现曲线投影效果
- 浅谈如何使用HTML5的Canvas绘图
- 使用CSS3的step()生成的动画效果