html - 如何在 Canvas 中着色圆圈

Question

我正在使用 HTML5 和 canvas 。我已经画了一个 2D 圆。现在我想用颜色对圆进行着色。但着色看起来像一个 3D 圆。这可以用 Canvas 吗？。谢谢。

Answer 1

正如@danday74 所说，您可以使用渐变来增加圆圈的深度。

您还可以使用阴影来增加圆圈的深度。

这是一个说明 3d 甜甜圈的概念验证:



我让你来设计你想要的圈子

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

var PI=Math.PI;

drawShadow(150,150,120,50);


function drawShadow(cx,cy,r,strokewidth){
  ctx.save();
  ctx.strokeStyle='white';
  ctx.lineWidth=5;
  ctx.shadowColor='black';
  ctx.shadowBlur=15;
  //
  ctx.beginPath();
  ctx.arc(cx,cy,r-5,0,PI*2);
  ctx.clip();
  //
  ctx.beginPath();
  ctx.arc(cx,cy,r,0,PI*2);
  ctx.stroke();
  //
  ctx.beginPath();
  ctx.arc(cx,cy,r-strokewidth,0,PI*2);
  ctx.stroke();
  ctx.shadowColor='rgba(0,0,0,0)';
  //
  ctx.beginPath();
  ctx.arc(cx,cy,r-strokewidth,0,PI*2);
  ctx.fillStyle='white'
  ctx.fill();
  //
  ctx.restore();
}

body{ background-color: white; }
canvas{border:1px solid red; margin:0 auto; }

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