HTML5教程

当前位置: HTML5技术网 > HTML5教程 > 使用HTML5画布(canvas)生成阴影效果

使用HTML5画布(canvas)生成阴影效果



      使用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
      希望这个小技巧能帮助大家生成更酷的画布效果。

【使用HTML5画布(canvas)生成阴影效果】相关文章

1. 使用HTML5画布(canvas)生成阴影效果

2. 使用HTML5画布实现的超棒javascript动画仪表板:gauge.js

3. 在HTML5中怎样实现Canvas阴影效果

4. 三分钟HTML5画布(Canvas)动画教程

5. HTML5画布(CANVAS)速查简表

6. HTML5画布下js的文字云/标签云效果 - D3 Cloud

7. CSS实现跨浏览器兼容性的盒阴影效果

8. CSS3阴影效果(兼容N多浏览器)

9. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果

10. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果

本文来源:https://www.51html5.com/a689.html

点击展开全部

﹝使用HTML5画布(canvas)生成阴影效果﹞相关内容

「使用HTML5画布(canvas)生成阴影效果」相关专题

其它栏目

也许您还喜欢