画布：两个同心圆之间的剥离区域

Question

在HTML 5中绘制的两个同心圆内有阴影区域的解决方案？  请找到下面的参考图像

Answer 1

一些三角函数满足您的需求。

使用三角函数计算从圆圈辐射的线段＆＃39;中心点，并通过圆圈的赞美。 （赞美==外圈减去内圈）。

// set an angle at which to radiate the line segment
// The angle is in radians
var angle=Math.PI/20;

// calculate the line segment's starting point
// on the inside circle
var x0=centerX+insideRadius*Math.cos(angle);
var y0=centerY+insideRadius*Math.sin(angle);

// calculate the line segment's ending point
// on the outside circle
var x1=centerX+outsideRadius*Math.cos(angle);
var y1=centerY+outsideRadius*Math.sin(angle);

以下是示例代码和演示：

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var PI=Math.PI;
var PI2=PI*2;
var cx=150;
var cy=150;
var radius=100;
var tickCount=50;
var currentTick=0;
var circleStrokeWidth=20;

ctx.lineWidth=circleStrokeWidth;
ctx.strokeStyle='lightgray';

ctx.beginPath();
ctx.arc(cx,cy,radius,0,PI2);
ctx.closePath();
ctx.stroke();

var insideRadius=radius-circleStrokeWidth/2;
var outsideRadius=radius+circleStrokeWidth/2;

ctx.lineWidth=2;
ctx.strokeStyle='black';

for(var i=0;i<tickCount;i++){
  var angle=PI2/tickCount*i;
  var x0=cx+insideRadius*Math.cos(angle);
  var y0=cy+insideRadius*Math.sin(angle);
  var x1=cx+outsideRadius*Math.cos(angle);
  var y1=cy+outsideRadius*Math.sin(angle);
  ctx.beginPath();
  ctx.moveTo(x0,y0);
  ctx.lineTo(x1,y1);
  ctx.stroke();
}

＆＃13;

body{ background-color: ivory; padding:20px; }
canvas{border:1px solid red;}

＆＃13;

<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

＆＃13;

＆＃13;