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个圆形，一个包含阴影，一个不包含阴影。

Html5 Canvas中提供了设置阴影的四个属性值分别为：

context.shadowColor = “red” 表示设置阴影颜色为红色

context.shadowOffsetX = 0表示阴影相对TEXT的水平距离，0表示两者水平位置重合

context.shadowOffsetY = 0表示阴影相对TEXT的垂直距离，0表示两者垂直位置重合

context.shadowBlur = 10 阴影模糊效果，值越大模糊越厉害。

1、首先打开PS，双击空白部分，选择要 *** 作的图片后打开。

2、首先我们要先为图片建立一个选区，在左侧工具栏选择【魔棒工具】。

3、接下来点击图片空白位置，将选区选出来，按快捷键Shift+Ctrl+I进行反选。

4、点击右下角fx图标添加图层样式，在d出的菜单中选择【投影】。

5、在投影对话框中，我们可以对【距离】、【扩展】、【大小】等进行自由设置，设置完毕后点击【确定】即可。

---