使用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在线调试地址：www.gbin1.com/gb/debug/5b6fd9cb-6bdf-4a7f-8f20-4ea73bf9ae76.htm
以上就是使用html5画布（canvas）生成阴影效果的内容。