javascript - 为什么 Canvas 中前一个圆圈的属性被新属性取代？

Question

我有 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>

Answer 1

如果您希望独立处理两个圆圈，请在绘制第二个圆圈之前关闭您开始的路径并开始新的路径。例如:

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();
}

http://jsfiddle.net/mudbo48j/1