Как нарисовать бегущую дорожку на холсте с помощью JavaScript

Question

Я пытаюсь создать базовый трек с JavaScript и HTML 5, как показано ниже.

Можно ли это сделать программно, или я должен использовать изображение в цикле это? Кривая дорожки будет меняться.

Я думаю об использовании изображения PNG и drawImage для визуализации холста. Я не уверен, что это лучший способ сделать это.

Какой будет оптимальный метод?

Answer 1

Я бы использовал Bezier curves, чтобы нарисовать дорожку. Если рисовать текущий сегмент трека на лету слишком медленно, я бы нарисовал весь трек в большом скрытом холсте и скопировал его части на видимый холст.

Следующий фрагмент рисует сегмент, который выглядит более или менее похожим на ваш пример.

window.onload = function() { 
 
    var width = 314, 
 
     height = 645, 
 
     canvas = document.getElementById('trackCanvas'); 
 
    canvas.width = width; 
 
    canvas.height = height; 
 
    var context = canvas.getContext('2d'); 
 
    context.strokeStyle = '#fff'; 
 
    context.lineWidth = width/2; 
 
    context.beginPath(); 
 
    context.moveTo(width/2, 1.1 * height); 
 
    context.bezierCurveTo(width/2.2, height/2.5, 
 
         width/2.4, height/4, 
 
         width, 0); 
 
    context.stroke(); 
 
};

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
#trackContainer { 
 
    display: inline-block; 
 
    background: #b2bfdc; 
 
} 
 
#trackCanvas { 
 
    vertical-align: top; 
 
}

<div id="trackContainer"> 
 
    <canvas id="trackCanvas"></canvas> 
 
</div>