Canvas track playback

Time:2020-10-12

Recently, I need to implement a track playback function. I have no experience in this field. After searching the Internet, I only found that this article mentioned – canvas track playback. It collects track points first and then plays back. My requirements are relatively simple. Track points are provided in the background. I only need to draw them dynamically. The complexity is reduced a lot. I mainly learn from it Drawing methods – usingsetIntervalMethod recursively.

During the production process, it is found that the timer attribute in the JSON structure in the original article is only used to make conditional judgment, and it is not a time stream data that I originally understood. The speed of track playback is related to the number of generated tracks (more slow track points are drawn, less fast track points are drawn).

JSON structure

[
    {
        "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
We introduce JSON as JS file and assign it to global variablestestPath(the introduction mode is based on the actual project requirements)

<style>
*{margin:0; padding:0;}
#test{border:1px solid #ccc; background: #eee; margin:20px 30px;}
</style>

<p><button id="start">start</button></p>
<canvas id='test' width="600" height="200"></canvas>

<script type="text/javascript" src='js/jquery-2.1.4.min.js'></script>
<script type="text/javascript" src='js/number.js'></script>

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/
Reference articles

Recommended Today

Reading papers on fairness of recommendation system (5)

My main task these days is to review the thesis “towards long term fairness in recommendation”[1]The algorithm described in is programmed, and then the effect of the algorithm is tested and recorded. The following describes my work in four parts: detailed implementation of model algorithm, data set, model evaluation criteria and test result record. Detailed […]