调用javascript函数后,Jquery / javascript将html重置为上一个表单

时间:2017-02-17 21:40:00

标签: javascript jquery html canvas draw

所以基本上我已经创建了一个函数,在用户点击按钮后激活绿色检查符号...事情是我需要将onclick事件在jquery post中完成后将HTML还原为旧表单这样:

  $.post("/User/SaveWatchList", postData)
                .done(function (response) {
                    if (response == "AllFieldsRequired") {
                        ShowErrorMessage("All fields are required!");
                        return;
                    } else {
                        AnimateGreenCheck();    
                    }
                });

请注意名为AnimateGreenCheck的功能,如下所示:

function AnimateGreenCheck() {
        var start = 100;
        var mid = 145;
        var end = 250;
        var width = 20;
        var leftX = start;
        var leftY = start;
        var rightX = mid - (width / 2.7);
        var rightY = mid + (width / 2.7);
        var animationSpeed = 20;

        var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
        ctx.lineWidth = width;
        ctx.strokeStyle = 'rgba(0, 150, 0, 1)';

        for (i = start; i < mid; i++) {
            var drawLeft = window.setTimeout(function () {
                ctx.beginPath();
                ctx.moveTo(start, start);
                ctx.lineTo(leftX, leftY);
                ctx.stroke();
                leftX++;
                leftY++;
            }, 1 + (i * animationSpeed) / 3);
        }

        for (i = mid; i < end; i++) {
            var drawRight = window.setTimeout(function () {
                ctx.beginPath();
                ctx.moveTo(leftX, leftY);
                ctx.lineTo(rightX, rightY);
                ctx.stroke();
                rightX++;
                rightY--;
            }, 1 + (i * animationSpeed) / 3);
        }

    }

这是“画布”元素,它在上面绘制绿色复选标记:

   <div style="width:100%; text-align:center;">
        <canvas class="canvas" height="160"></canvas>
    </div>

每次用户点击按钮以及帖子完成后,我都需要以某种方式重复绘制过程......

我怎么能这样做?

1 个答案:

答案 0 :(得分:0)

好的,所以这样做了:

   var canvas = $('.canvas')[0]; // or document.getElementById('canvas');
   canvas.width = canvas.width;

如规范中所述:

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html