canvas 궤적 재생

최근 에 한 프로젝트 는 하나의 궤적 재생 기능 을 실현 해 야 한다. 자신 은 이런 경험 이 없다. 인터넷 에서 검색 한 후에 도 이 글 이 언급 한 것 만 발견 했다. canvas 궤적 재생. 그 는 먼저 궤적 점 을 수집 한 다음 에 재생 하 는 것 이다. 나의 수 요 는 비교적 간단 하 다. 궤적 점 배경 에서 제공 하 는 것 이다. 나 는 동태 적 으로 그리 기만 하면 된다. 복잡 도가 많이 낮 아 졌 다.주로 그림 그리 기 방법 인 사용 setInterval 방법 을 참고 하여 재 귀적 으로 실현 했다.
제작 과정 에서 원래 글 에서 json 구조 중의 timer 속성 은 조건 판단 에 만 사용 되 는 것 을 발견 했다. 원래 자신 이 이해 한 것 이 시간 흐름 데이터 가 아니 라 궤적 재생 의 속도 와 생 성 된 궤적 의 개수 가 얼마나 관련 이 있 는 지 (그림 의 느 린 궤적 점 이 많 고 그림 의 빠 른 궤적 점 이 적다).
json 구조

[
    {
        "path": [
            {
                "x": 82, 
                "y": 43
            }, 
            {
                "x": 83, 
                "y": 43
            }, 
            {
                "x": 84, 
                "y": 45
            }, 
            {
                "x": 86, 
                "y": 47
            }, 
            {
                "x": 86, 
                "y": 49
            }, 
            {
                "x": 86, 
                "y": 54
            }, 
            {
                "x": 86, 
                "y": 59
            }, 
            {
                "x": 86, 
                "y": 64
            }, 
            {
                "x": 86, 
                "y": 69
            }, 
            {
                "x": 86, 
                "y": 74
            }, 
            {
                "x": 86, 
                "y": 78
            }, 
            {
                "x": 86, 
                "y": 83
            }, 
            {
                "x": 86, 
                "y": 87
            }, 
            {
                "x": 86, 
                "y": 89
            }, 
            {
                "x": 86, 
                "y": 91
            }, 
            {
                "x": 86, 
                "y": 92
            }, 
            {
                "x": 86, 
                "y": 93
            }, 
            {
                "x": 86, 
                "y": 94
            }, 
            {
                "x": 86, 
                "y": 95
            }
        ]
    }, 
    {
        "path": [
            {
                "x": 129, 
                "y": 36
            }, 
            {
                "x": 129, 
                "y": 39
            }, 
            {
                "x": 129, 
                "y": 44
            }, 
            {
                "x": 129, 
                "y": 49
            }, 
            {
                "x": 129, 
                "y": 54
            }, 
            {
                "x": 129, 
                "y": 59
            }, 
            {
                "x": 128, 
                "y": 65
            }, 
            {
                "x": 127, 
                "y": 73
            }, 
            {
                "x": 125, 
                "y": 78
            }, 
            {
                "x": 125, 
                "y": 81
            }, 
            {
                "x": 124, 
                "y": 88
            }, 
            {
                "x": 123, 
                "y": 91
            }, 
            {
                "x": 123, 
                "y": 94
            }, 
            {
                "x": 123, 
                "y": 96
            }, 
            {
                "x": 123, 
                "y": 97
            }, 
            {
                "x": 123, 
                "y": 98
            }, 
            {
                "x": 123, 
                "y": 99
            }, 
            {
                "x": 122, 
                "y": 100
            }
        ]
    }
]

html 는 json 을 js 파일 로 도입 하고 전체 변수 testPath 에 할당 합 니 다 (도입 방식 은 실제 프로젝트 요구 에 따라)

start

js

$('#start').click(function(event) {
    var lineIndex = 0,pointIndex = 0,line2;
    var obj = document.getElementById('test');
    var cxt = obj.getContext('2d');
    cxt.lineWidth = 1;
    cxt.strokeStyle = 'red';
    cxt.lineCap = 'round';
    cxt.clearRect(0,0,600,200);
    function drawBegin(){
        cxt.beginPath();
        pointIndex=0;
        var intervalHandle = window.setInterval(function () {
            line2 = testPath[lineIndex].path[pointIndex];
            if (!line2) {
                window.clearInterval(intervalHandle);
                if (lineIndex < testPath.length - 1) {
                    lineIndex = lineIndex + 1;
                    drawBegin();
                }
            }else{
                if (pointIndex == 0) {
                    cxt.moveTo(line2.x, line2.y);
                }
                pointIndex = pointIndex + 1;
                cxt.lineTo(line2.x, line2.y);
                cxt.stroke();
            }
        },0);
    }
    drawBegin();
});

https://jsfiddle.net/99g4cg3k/참고 문장