Question

你好，编程员也是我遇到了一个我无法解决的新问题.. 我希望代码能够创建一个从4开始倒计时的倒计时圈。

以下是我遇到问题的代码.. Want to make it look something like this:

＆＃13;

var canvasPause = $('#pauseCanvas');
var ctx = canvasPause[0].getContext("2d");
 var countDown = 4; //Countdown variable in sec
/*BLOCK WITH COUNTDOWN FUNCTION*/
doCount();
  function doCount () {
        setTimeout(function () {
                    ctx.font = "220px Open Sans";
                    ctx.fillStyle = 'white';
                    ctx.textAlign = "center";
                    var displayVal = countDown;
                    console.log(countDown);
                    ctx.textAlign = "center";
                        if (countDown == 0) {
                            ctx.clearRect(700, 415, 150, 170);
                            ctx.font = "110px Open Sans";
                            ctx.fillText("GO!", 775, 535);
                            setTimeout(function () {
                            showBox = 0;

                        }, 1000);
                    }
                    else {
                            countDown--;
                            self.doCount();
                            ctx.fillStyle = "black";
                            ctx.clearRect(700, 415, 150, 170);
                            ctx.fillStyle = 'white';
                            ctx.fillText(displayVal, 775, 575);
                    }
               
                }, 1000);
    }

    /*Upcoming function to control the circle animation*/
   function displayCircle () {
        $('#circle').css("visibility", "visible");
        var time = 4;
        var initialOffset = '440';
        var i = 1
      
        $('.circle_animation').css('stroke-dashoffset', initialOffset - (1 * (initialOffset / time)));

        var interval = setInterval(function () {
            if (i == time) {
                clearInterval(interval);
                return;
            }

        $('.circle_animation').css('stroke-dashoffset', initialOffset - ((i + 1) * (initialOffset / time)));
            i++;
        }, 1000);
    }

＆＃13;

    svg {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        left: 600px;
        top: 315px;
    }

    .circle_animation {
        stroke-dasharray: 440; /* this value is the pixel circumference of the circle (PI * d) */
        stroke-dashoffset: 440;
        transition: all 1.0s linear;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pauseDiv" style="width: 1550px; height: 950px; position: absolute; margin-left: 185px; background-color: #201f1e; opacity:0;z-index:0; ">
  <svg style="position: absolute;" id="circleDisplay" width="350" height="350" xmlns="http://www.w3.org/2000/svg">
    <circle id="circle" class="circle_animation" r="69" cy="170" cx="170" stroke-width="30" stroke="#6fdb6f" fill="none" />
  </svg>
  <canvas style="border: solid;border-color:red;" id="pauseCanvas" width="1550px" height="950px" runat="server"></canvas>
</div>

＆＃13;

我希望你能再次帮助我..

Answer 1

现在您还有另一个错误Uncaught TypeError: this.doCount is not a function。

在您的问题中添加 - you must add jsfiddle code to Stack Overflow并修复http链接。

Javascript Canvas倒计时圈

1 个答案: