javascript - 将 CSS 框阴影转换为 Canvas 弧形内阴影

Question

我在 HTML 5 Canvas 中创建了一个圆弧，目前使用单独的 HTML 元素在其顶部覆盖了一个内部阴影。我不想将此内部阴影作为单独的元素并应用 CSS box-shadow，而是想将 exact same 阴影应用于 Canvas 内的弧形，而不是使用 javascript .

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

box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);

这JSFiddle显示我当前拥有的内容，或查看以下代码段:

$(document).ready(function(){

    // Convert degrees to radians
    function convertToRadians(degrees){
        return degrees * (Math.PI/180);
    }

    // Create map to convert percentage to radians
    function map(value, minIn, maxIn, minOut, maxOut){
        return (value - minIn) * (maxOut - minOut) / (maxIn - minIn) + minOut;
    }

    // Get the canvas
    var canvas = document.getElementById('progress');
    var context = canvas.getContext('2d');

    // Set the size of the ring
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var sections = 6;
    var radius = 94;
    // Begin the circle
    context.beginPath();
    context.arc(centerX, centerY, radius, convertToRadians(90), convertToRadians(map(100, 0, 100, 90, 450)), false);
    // Create the gradient
    var gradient = context.createLinearGradient(canvas.width, 0, 0, canvas.height);
    gradient.addColorStop(0, '#D95FF6');
    gradient.addColorStop(0.3, '#D95FF6');
    gradient.addColorStop(0.7, '#4512CB');
    gradient.addColorStop(1, '#4512CB');
    // Set the stroke
    context.lineWidth = 22;
    context.strokeStyle = gradient;
    context.stroke();
    
});
  

html, body {
    background: #f5f5f5;
}
#progress_shadow {
    position: absolute;
    border-radius: 50%;
    width: 212px;
    height: 212px;
    margin: 14px;
    -webkit-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    z-index: 8;
}
#progress {
    position: absolute;
    margin: 8px;
    z-index: 7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progress_shadow"></div>
<canvas id="progress" width="224" height="224"></canvas>

Answer 1

您也可以在 Canvas 中使用阴影，但要获得嵌入阴影，您还必须使用裁剪，这会导致阴影的“外部”被裁剪掉。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var PI=Math.PI;
var PI2=PI*2;
var startColor='#DD3002';
var endColor='#FF9966';
var centerX=150;
var centerY=150;
var radius=115;
var sections=6;

drawGradient(centerX,centerY,radius-13,sections);

drawShadow(centerX,centerY,radius);

function drawShadow(cx,cy,r){
  ctx.save();
  ctx.strokeStyle='white';
  ctx.lineWidth=2;
  ctx.shadowColor='black';
  ctx.shadowBlur=18;
  //
  ctx.beginPath();
  ctx.arc(cx,cy,r,0,PI2);
  ctx.clip();
  ctx.stroke();
  ctx.stroke();
  //
  ctx.shadowColor='rgba(5,71,110,.50)';
  ctx.shadowBlur=4;
  ctx.shadowOffsetY=3;
  ctx.stroke();
  ctx.stroke();
  //
  ctx.restore();
}

function drawGradient(centerX,centerY,radius,sections){
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, convertToRadians(90), convertToRadians(map(100, 0, 100, 90, 450)), false);
  // Create the gradient
  var gradient = ctx.createLinearGradient(canvas.width, 0, 0, canvas.height);
  gradient.addColorStop(0, '#D95FF6');
  gradient.addColorStop(0.3, '#D95FF6');
  gradient.addColorStop(0.7, '#4512CB');
  gradient.addColorStop(1, '#4512CB');
  // Set the stroke
  ctx.lineWidth = 22;
  ctx.strokeStyle = gradient;
  ctx.stroke();
}

function convertToRadians(degrees){
  return degrees * (Math.PI/180);
}

function map(value, minIn, maxIn, minOut, maxOut){
  return (value - minIn) * (maxOut - minOut) / (maxIn - minIn) + minOut;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width=300 height=300></canvas>