如何在画布中遮住圆圈 [英] How to shade the circle in canvas

问题描述

我使用 HTML5 和 canvas 。我已经画了一个2D的圆。现在我想用一个颜色阴影的圆形，但阴影看起来像一个3D圆。这是可能的画布吗？

I am working with HTML5 with canvas. I already draw a 2D circle.Now i want to shade the circle with a color.but the shading look like a 3D circle.Is this possible with canvas?.Thank you.

推荐答案

As @ danday74说，你可以使用渐变为你的圈子增加深度。

As @danday74 says, you can use a gradient to add depth to your circle.

您也可以使用阴影为您的圈子添加深度。

这里是一个概念验证3d甜甜圈：

Here's a proof-of-concept illustrating a 3d donut:

我离开

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>

这篇关于如何在画布中遮住圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！