如何在画布中遮住圆圈 [英] 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屋!
查看全文