Есть массив точек. Мне нужно сделать анимацию рисования линии. Как это можно реализовать ? Вот пример моего кода:
https://jsfiddle.net/drakoice/v6r75uoq/2/
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var timer;
let oneLineX = [0,50,75,100,140,150,200,280,300,320,350];
let oneLineY = [100,90,100,110,100,90,100,100,90,100,100];
function drawLine1(){
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineWidth = '4';
ctx.moveTo(oneLineX[0],oneLineY[0]);
for(var i=1; i<10;i++){
ctx.lineTo(oneLineX[i],oneLineY[i]);
ctx.lineCap = "round";
}
ctx.stroke();
ctx.closePath();
}
drawLine1();
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var timer;
let oneLineX = [0,50,75,100,140,150,200,280,300,320,350];
let oneLineY = [100,90,100,110,100,90,100,100,90,100,100];
function drawLine1(){
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineWidth = '4';
ctx.moveTo(oneLineX[0],oneLineY[0]);
for(var i=1; i<10;i++){
ctx.lineTo(oneLineX[i],oneLineY[i]);
ctx.lineCap = "round";
}
ctx.stroke();
ctx.closePath();
}
drawLine1();
#c1 {
width: 400px;
height: 200px;
border: 3px solid black;
margin: 40px;
background-image: url(data:image/png;base64,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);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="js.js" defer></script>
</head>
<body>
<canvas id="c1" width="400" height="200"></canvas>
</body>
</html>