如何使用JavaScript在画布上绘制运行轨迹

Question

I am trying to make a basic track with JavaScript and HTML 5 like the image below.

Is it possible to do this programmatically or should I use an image to loop it? The curve of the track will be changing.

I'm thinking about using a PNG image and drawImage to render the canvas. I'm not sure if that is the best way to do it.

What would be the optimal method?

Answer 1

I would use Bezier curves to draw the track. If drawing the current track segment on the fly is too slow, I would draw the whole track in a large hidden canvas and copy portions of it to the visible canvas.

The following snippet draws a segment that looks more or less like your example.

 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>