我有 Canvas ,我想在其中画一个内圆,并在其上方画一个外圆。第一条奇怪的线显示在圆圈之间。其次,我希望外圆的lineWidth为5,它也将外圆设为5。 如何阻止这个?
我的代码,
<script>
function drawCircle() {
var circleCanvas = document.getElementById("myCircleCanvas");
var circle = circleCanvas.getContext("2d");
circle.beginPath();
var x = 95;
var y = 75;
var radius = 60;
circle.arc(x, y, radius, 0, 2 * Math.PI);
circle.stroke();
circle.fillStyle = '#505050';
circle.fill();
circle.fillStyle = '#fff';
var font = "bold " + radius / 3 + "px serif";
circle.font = font;
circle.fillText("AVAYA", x - x / 3, y - y / 5);
circle.fillStyle = '#000';
circle.fillText("CIE", x - x / 3 + 15, y - y / 5 + 25);
circle.arc(x, y, radius + 10, 0, 2 * Math.PI);
circle.lineWidth = 5;//just want to increase outer circle
circle.stroke(); //why drawing extra line
}
</script>
<canvas id="myCircleCanvas">Your browser does not support the HTML5 canvas tag.
</canvas>
最佳答案
如果您希望独立处理两个圆圈,请在绘制第二个圆圈之前关闭您开始的路径并开始新的路径。例如:
function drawCircle() {
var circleCanvas = document.getElementById("myCircleCanvas");
var circle = circleCanvas.getContext("2d");
circle.beginPath();
var x = 95;
var y = 75;
var radius = 60;
circle.arc(x, y, radius, 0, 2 * Math.PI);
circle.stroke();
circle.fillStyle = '#505050';
circle.fill();
circle.fillStyle = '#fff';
var font = "bold " + radius / 3 + "px serif";
circle.font = font;
circle.fillText("AVAYA", x - x / 3, y - y / 5);
circle.fillStyle = '#000';
circle.fillText("CIE", x - x / 3 + 15, y - y / 5 + 25);
circle.closePath();
circle.beginPath();
circle.arc(x, y, radius + 10, 0, 2 * Math.PI);
circle.lineWidth = 5;//just want to increase outer circle
circle.stroke(); //why drawing extra line
circle.closePath();
}
关于javascript - 为什么 Canvas 中前一个圆圈的属性被新属性取代?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28086897/