Javascript 将CSS框阴影转换为画布圆弧内部阴影

我在HTML5画布中创建了一个弧，当前使用一个单独的HTML元素在其顶部覆盖了一个内部阴影。我不想将这个内部阴影作为一个单独的元素并应用CSS框阴影，而是想将完全相同的阴影应用到画布中的圆弧上，而不是使用javascript

换句话说，我想将以下内容转换为javascript：

盒影：插入0px 3px 5px 0px rgba5,71,110,0.51，插入0px 0px 19px 0px rgba0,0,0.6； 这显示了我当前拥有的内容，或查看以下代码段：

$document.readyfunction{ //将度转换为弧度 函数变换器{ 返回度*Math.PI/180； } //创建贴图以将百分比转换为弧度 函数mapvalue、minIn、maxIn、minOut、maxOut{ 返回值-minIn*maxOut-minOut/maxIn-minIn+minOut； } //拿画布 var canvas=document.getElementById'progress'； var context=canvas.getContext'2d'； //设置环的大小 var centerX=canvas.width/2； var centerY=canvas.height/2； var段=6； var半径=94； //开始循环 context.beginPath； context.arccenterX，centerY，radius，convertToRadians90，convertToRadiansmap100，0，100，90，450，false； //创建渐变 var gradient=context.createLinearGradientcanvas.width，0,0，canvas.height； gradient.addColorStop0，'D95FF6'； 梯度0.3，'D95FF6'； 梯度0.7，'4512CB'； gradient.addColorStop1，'4512CB'； //划船 context.lineWidth=22； context.strokeStyle=渐变； 中风； }; html，正文{ 背景：F5； } 进步与阴影{ 位置：绝对位置； 边界半径：50%； 宽度：212px； 身高：212px； 利润率：14px； -webkit盒阴影：插入0px 3px 5px 0px rgba5,71,110,0.51，插入0px 0px 19px 0px rgba0,0,0.6； -moz盒阴影：插入0px 3px 5px 0px rgba5,71,110,0.51，插入0px 0px 19px 0px rgba0,0,0.6； 盒影：插入0px 3px 5px 0px rgba5,71,110,0.51，插入0px 0px 19px 0px rgba0,0,0.6； z指数：8； } 进展{ 位置：绝对位置； 利润率：8px； z指数：7； }

---

也可以在画布中使用阴影，但要获得插入阴影，还必须使用剪裁，这会导致阴影的外部被剪裁掉

var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； var-PI=Math.PI； var PI2=PI*2； var startColor='DD3002'； var endColor='FF9966'； var centerX=150； var centerY=150； var半径=115； var段=6； drawGradientcenterX，centerY，半径-13，截面； drawShadowcenterX、centerY、半径； 函数cx，cy，r{ ctx.save； ctx.strokeStyle='white'； ctx.线宽=2； ctx.shadowColor='black'； ctx.shadowBlur=18； // ctx.beginPath； ctx.arccx，cy，r，0，PI2； ctx.clip； ctx.stroke； ctx.stroke； // ctx.shadowColor='rgba5,71110,50'； ctx.shadowBlur=4； ctx.shadowOffsetY=3； ctx.stroke； ctx.stroke； // ctx.restore； } 函数drawGradientcenterX、centerY、半径、截面{ ctx.beginPath； ctx.arccenterX，centerY，radius，convertoradians90，convertoradiansMap100，0，100，90，450，false； //创建渐变 var gradient=ctx.createLinearGradientcanvas.width，0,0，canvas.height； gradient.addColorStop0，'D95FF6'； 梯度0.3，'D95FF6'； 梯度0.7，'4512CB'； gradient.addColorStop1，'4512CB'； //划船 ctx.lineWidth=22； ctx.strokeStyle=梯度； ctx.stroke； } 函数变换器{ 返回度*Math.PI/180； } 函数mapvalue、minIn、maxIn、minOut、maxOut{ 返回值-minIn*maxOut-minOut/maxIn-minIn+minOut； }

---

也可以在画布中使用阴影，但要获得插入阴影，还必须使用剪裁，这会导致阴影的外部被剪裁掉

var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； var-PI=Math.PI； var PI2=PI*2； var startColor='DD3002'； var endColor='FF9966'； var centerX=150； var centerY=150； var半径=115； var段=6； drawGradientcenterX，centerY，半径-13，截面； drawShadowcenterX、centerY、半径； 函数cx，cy，r{ ctx.save； ctx.strokeStyle='white'； ctx.线宽=2； ctx.shadowColor='black'； ctx.shadowBlur=18； // ctx.beginPath； ctx.arccx，cy，r，0，PI2； ctx.clip； ctx.stroke； ctx.stroke； // ctx.shadowColor='rgba5,71110,50'； ctx.shadowBlur=4； ctx.shadowOffsetY=3； ctx.stroke； ctx.stroke； // ctx.restore； } 函数drawGradientcenterX、centerY、半径、截面{ ctx.beginPath； ctx.arccenterX，centerY，radius，convertoradians90，convertoradiansMap100，0，100，90，450，false； //创建渐变 var gradient=ctx.createLinearGradientcanvas.width，0,0，canvas.height； gradient.addColorStop0，'D95FF6'； 梯度0.3，'D95FF6'； 梯度 ent.addColorStop0.7，'4512CB'； gradient.addColorStop1，'4512CB'； //划船 ctx.lineWidth=22； ctx.strokeStyle=梯度； ctx.stroke； } 函数变换器{ 返回度*Math.PI/180； } 函数mapvalue、minIn、maxIn、minOut、maxOut{ 返回值-minIn*maxOut-minOut/maxIn-minIn+minOut； }

---

非常感谢！只是一个简单的问题，为什么要将“绘制阴影”和“绘制渐变”放在两个单独的函数中？@BenCarey我将“阴影”和“渐变”分开，只是为了确保我生成的阴影与示例中的阴影相同。没有理由不能合并这些功能。：-请注意，阴影的成本相对较高，因此如果要对多个渐变圆弧进行阴影处理，则可以在单独的画布上创建一次阴影效果，并将一个阴影绘制到多个圆弧上。祝你的项目好运！非常感谢！只是一个简单的问题，为什么要将“绘制阴影”和“绘制渐变”放在两个单独的函数中？@BenCarey我将“阴影”和“渐变”分开，只是为了确保我生成的阴影与示例中的阴影相同。没有理由不能合并这些功能。：-请注意，阴影的成本相对较高，因此如果要对多个渐变圆弧进行阴影处理，则可以在单独的画布上创建一次阴影效果，并将一个阴影绘制到多个圆弧上。祝你的项目好运！