我想画一个像甜甜圈的东西,所以在中间有一个洞。我尝试使用ctx.clip(),但我意识到它限制了内部路径,我希望它限制到外部的路径。
注意事项:
this.lineWidth是" rim"或外部是
ctx.beginPath();
// this should be the hole
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
ctx.clip();
// this should be the outside part
ctx.arc(this.x,this.y,this.r+this.lineWidth,0,Math.PI*2,false);
ctx.fillStyle = "#00ff00";
ctx.fill();
相反,我得到一个填充圆圈,因为它限制了通往较小弧线内部而不是外部弧线的路径。是否有另一种方法与clip()相反?
答案 0 :(得分:3)
我找到了这个解决方案http://jsfiddle.net/Hnw6a/:
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
//ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
ctx.beginPath()
ctx.arc(100,100,100,0,Math.PI*2, false); // outer (filled)
ctx.arc(100,100,55,0,Math.PI*2, true); // outer (unfills it)
ctx.fill();
使用以下画布节点:
<canvas id="canvas1" width="500" height="500"></canvas>
答案 1 :(得分:3)
将线宽设置为所需宽度,绘制圆圈,然后使用“ctx.stroke();”。请注意,这不允许您用颜色填充内圆。