正在尝试在画布上绘制两个形状。第一个是半圈。第二是一条线。
半圈:
this.ctx.beginPath();
this.ctx.arc(cs, cs, radius, angle, angle+Math.PI, true);
this.ctx.fillStyle = '#FC4F54';
this.ctx.fill();
this.ctx.stroke();
this.ctx.closePath();
线:
var x = (Math.cos(angle + Math.PI/2) * this.canvasSize) + cs;
var y = (Math.sin(angle + Math.PI/2) * this.canvasSize) + cs;
this.ctx.beginPath();
this.ctx.moveTo(cs,cs);
this.ctx.lineTo(x,y);
this.ctx.lineWidth = 2 * radius;
this.ctx.strokeStyle = "#ffffff[![enter image description here][1]][1]";
this.ctx.stroke();
this.ctx.closePath();
当我按照上面显示的顺序运行它们时,得到以下结果:
但是,当我更改两个的顺序以使该行位于第一位时,这是结果:
如果我增加圆弧的半径,则第二次开始在中心看到红色。这让我认为,以某种方式,线的lineWidth越过了弧形样式。但是,如果我尝试将圆形的lineWidth显式设置为零,则它将无效。
我错过了什么?
弧的外观是由您怀疑的lineWidth更改引起的。
当您尝试将lineWidth设置为0时,这无效,因为忽略了零值,如本文档中所述。
如果在绘制圆弧之前将lineWidth设置为1,则无论您绘制圆弧和直线的顺序如何,都将得到相同的结果。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句