javascript - 如何显示/隐藏 Canvas 的一部分？

这是我的JS fiddle

我有一个要求，例如当用户单击中心圆时，它应该切换外部圆，而当用户单击应该更改中心圆值的外部小圆时。

在这里，当用户单击中心圆时，我没有得到如何显示/隐藏Canvas的一部分的信息？

有什么帮助吗？

GenerateCanvas();

function GenerateCanvas() {
    try {
        var FlagCircleCenterCoordinates = new Array();
        var FlagCircles = [];

        var CenterX = document.getElementById('canvasFlag').width / 2;
        var CenterY = document.getElementById('canvasFlag').height / 2;

        var OuterTrackRadius = 98;
        var InnerTrackRadius = 70;
        var InnerCircleRadius = 20;

        var FlagElement = document.getElementById("canvasFlag");
        var ObjContext = FlagElement.getContext("2d");

        // Outer track
        ObjContext.fillStyle = "#FFF";
        ObjContext.beginPath();
        ObjContext.arc(CenterX, CenterY, OuterTrackRadius, 0, 2 * Math.PI);
        ObjContext.strokeStyle = '#CCC';
        ObjContext.stroke();
        ObjContext.fill();

        // Inner track
        ObjContext.beginPath();
        ObjContext.arc(CenterX, CenterY, InnerTrackRadius, 0, 2 * Math.PI);
        ObjContext.strokeStyle = '#CCC';
        ObjContext.stroke();

        // Inner small circle
        ObjContext.beginPath();
        ObjContext.arc(CenterX, CenterY, InnerCircleRadius, 0, 2 * Math.PI);
        ObjContext.strokeStyle = '#CCC';
        ObjContext.stroke();

        //Max 17...other wide need to change the Inner and Outer circle radius
        var FlagImagesArray =  [1, 2, 3,4,5];

        if (FlagImagesArray.length > 0) {
            var StepAngle = 2 * Math.PI / FlagImagesArray.length;
            var FlagCircleRadius = (OuterTrackRadius - InnerTrackRadius) / 2;
            var RadiusOfFlagCircleCenters = OuterTrackRadius - FlagCircleRadius;

            for (var LoopCnt in FlagImagesArray) {
                var CircleCenterCoordinates = new Object();

                 CircleCenterCoordinates.PostionX = CenterX + (Math.cos(StepAngle * (parseInt(LoopCnt) + 1)) * RadiusOfFlagCircleCenters);
                 CircleCenterCoordinates.PostionY = CenterY + (Math.sin(StepAngle * (parseInt(LoopCnt) + 1)) * RadiusOfFlagCircleCenters);

                ObjContext.beginPath();
                ObjContext.arc(CircleCenterCoordinates.PostionX, CircleCenterCoordinates.PostionY, FlagCircleRadius, 0, 2 * Math.PI);
                ObjContext.strokeStyle = '#CCC';
                ObjContext.stroke();
                ObjContext.fillStyle = 'blue';
                ObjContext.fillText(FlagImagesArray[LoopCnt], CircleCenterCoordinates.PostionX, CircleCenterCoordinates.PostionY);

                FlagCircleCenterCoordinates[LoopCnt] = CircleCenterCoordinates;

                var ObjFlagCircle = {
                    Left : CircleCenterCoordinates.PostionX - FlagCircleRadius,
                    Top : CircleCenterCoordinates.PostionY - FlagCircleRadius,
                    Right : CircleCenterCoordinates.PostionX + FlagCircleRadius,
                    Bottom : CircleCenterCoordinates.PostionY + FlagCircleRadius,
                    FlagName : FlagImagesArray[LoopCnt]
                }

                FlagCircles[LoopCnt] = ObjFlagCircle;
            }

            $('#canvasFlag').mousemove(function (Event) {
                 debugger;
                $(this).css('cursor', 'auto');

                var ClickedX = Event.pageX - $('#canvasFlag').offset().left;
                var ClickedY = Event.pageY - $('#canvasFlag').offset().top;
                for (var Count = 0; Count < FlagCircles.length; Count++) {

                    if (ClickedX < FlagCircles[Count].Right &&
                        ClickedX > FlagCircles[Count].Left &&
                        ClickedY > FlagCircles[Count].Top &&
                        ClickedY < FlagCircles[Count].Bottom) {
                        $(this).css('cursor', 'pointer');
                        break;
                    }
                }
            });

            $('#canvasFlag').click(function (Event) {
                 debugger;
                $(this).css('cursor', 'auto');

                var ClickedX = Event.pageX - $('#canvasFlag').offset().left;
                var ClickedY = Event.pageY - $('#canvasFlag').offset().top;
                for (var Count = 0; Count < FlagCircles.length; Count++) {

                    if (ClickedX < FlagCircles[Count].Right &&
                        ClickedX > FlagCircles[Count].Left &&
                        ClickedY > FlagCircles[Count].Top &&
                        ClickedY < FlagCircles[Count].Bottom) {
                            ObjContext.fillStyle = "#FFF";
                            ObjContext.beginPath();
                            ObjContext.arc(CenterX, CenterY, InnerCircleRadius - 1, 0, Math.PI * 2);
                            ObjContext.closePath();
                            ObjContext.fill();

                            ObjContext.fillStyle = "blue";
                            ObjContext.fillText(FlagCircles[Count].FlagName, CenterX, CenterY);

                        break;
                    }
                }
            });
        }
    }
    catch (E) {
        alert(E);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="canvasFlag" width="200" height="200">
    Your browser does not support the canvas
</canvas>

最佳答案

天啊。好了，首先，您需要摆脱try / catch语句，它什么也没做。

接下来，您需要将所有这些var放在函数主体之外，我们需要能够从另一个函数访问它们

看来您已完成所有点击功能，并且也可以正常工作。很好，继续前进，将以jquery开头的两行移到generateCanvas函数之外。它们只需要运行一次，我们将需要再次调用generate canvas。

第四，创建一个变量以在某个位置切换外圈，并在该变量为true时仅在generateCanvas（）中绘制外圈。您还应该在断开之前立即将另一个Global变量设置为Count，以便在重新生成画布时可以记住它。
使用click函数中包含的所有代码来绘制带有数字的内圆，并将其放入生成画布中。确保仅在您用来记住Count的变量设置为某种值（即您已经单击了外部数字）的情况下才调用代码

接下来，在您的click函数中添加一个generateCanvas（）调用，现在您的click函数将设置用于表示中心值的变量，重新绘制画布并返回。为了确定单击中心的时间，您需要在鼠标按下功能中添加更多逻辑，但是根据已有的代码，您可以弄清楚，您的主要问题是将其设置为只能运行一次，没有多次。这使画布更像是图像，而不是活动的绘图元素

不要忘记添加FlagElement.width = FlagElement.width来清除画布！ （或仅在其上绘制背景）