Question

我正在使用画布。我画了一套线。这是我的示例代码

for(var i = 0 ; i< points.length; i++){
var point = points[i];

setInterval(function() {
  ctx.strokeStyle = "black";
  ctx.moveTo(point.startX, point.startY);
  ctx.lineTo(point.startX1, point.startY1); 
  ctx.stroke();
 }, 500);
}

此代码每0.5秒后绘制一行。但我希望逐步制作动画。所以请逐步帮助划清界限。

此屏幕截图显示输出。我在SVG中做到了这一点。但我在画布上也需要相同的东西。

enter image description here

Answer 1

<!DOCTYPE html>
<html>
    <head>
        <title>Parent selector</title>
    </head>
<body>
<canvas height="300px" width="500px" id="canva"></canvas>
<script>
    var canva = document.getElementById('canva'),
        ctx = canva.getContext('2d');

    var Point = function (x, y) {
        this.startX = x;
        this.startY = y;
    };
    var points = [new Point(1, 2), 
                  new Point(10, 20), 
                  new Point(30, 30), 
                  new Point(40, 80), 
                  new Point(100, 100), 
                  new Point(120, 100)];

    //goto first point
    ctx.strokeStyle = "black";
    ctx.moveTo(points[0].startX, points[0].startY);

    var counter = 1,
    inter = setInterval(function() {
        //create interval, it will
        //iterate over pointes and when counter > length
        //will destroy itself
        var point = points[counter++];
        ctx.lineTo(point.startX, point.startY); 
        ctx.stroke();
        if (counter >= points.length) {
           clearInterval(inter);
        }
        console.log(counter);
    }, 500);
    ctx.stroke();
</script>
    </body>
</html>

Answer 2

async function aWaitF(ctx, index, ary) {

        if (!ary) return;

        for (let i = 0; i < ary.length; i++) {

            let cur = {};
            cur.x = name_pos[i].x;  // x position
            cur.val = ary[i].Y - 0;
            cur.y = y_h - y_h * ((ary[i].Y - 0) / series_max); // y position
            let prev = {};
            let next = {};
            let font_pos = null;

            if (i === 0) {

            } else {
                prev.val = ary[i - 1].Y - 0;
                prev.x = name_pos[i - 1].x;
                prev.y = t + y_h - y_h * ((ary[i - 1].Y - 0) / series_max);
                next.val = ary[i + 1] ? ary[i + 1].Y - 0 : 0;
                ctx.lineWidth = 0.5;

                **await orderRender();**

                function orderRender() {
                    return new Promise(resolve => {
                        let w = cur.x - prev.x;
                        let h = cur.y - prev.y;
                        **let rad = Math.atan2(h, w);** 

                        let x = cur.x > prev.x ? prev.x : cur.x;
                        let y = cur.y > prev.y ? prev.y : cur.y;
                        **let imgData = ctx.getImageData(x, y, w, h);**


                        let timer = requestAnimFrame(drawLine);
                        let num = 0;

                        function drawLine() {
                            **ctx.putImageData(imgData, x, y);**
                            ctx.beginPath();
                            ctx.moveTo(prev.x, prev.y);
                            let newX = prev.x + num;
                            let newH = Math.tan(rad) * num;
                            let newY = prev.y + newH;
                            // num += (ary.length - i) * 10;
                            num += 5;

                            ctx.lineTo(newX, newY);
                            ctx.stroke();
                            timer = requestAnimFrame(drawLine);
                            if (num >= w) {
                                ctx.beginPath();
                                ctx.moveTo(prev.x, prev.y);
                                ctx.lineTo(cur.x, cur.y);
                                ctx.stroke();
                                window.cancelAnimationFrame(timer);
                                resolve();
                            }
                        }
                    });
                }
            }
        }
    }

如何在html5画布中逐步绘制线条动画

2 个答案: