如何使用JavaScript在畫布上繪製跑道

我正在嘗試使用JavaScript和HTML 5製作基本曲目，如下圖所示。如何使用JavaScript在畫布上繪製跑道

是否有可能做到這一點編程或者我應該用圖像來循環呢？賽道的曲線將會改變。

我正在考慮使用PNG圖像和drawImage來呈現畫布。我不確定這是否是最好的方式。

什麼是最佳方法？

2015-09-07 tipsywacky

你可以只使用路徑，既簡單，直線那些和貝塞爾曲線。對於你展示的圖片，我會在創建2條路徑之前用白色填充畫布 - 每條路徑都圍繞着一個紫色區域。如果賽道關閉，我會用紫色填充，然後制定一條定義賽道外圈的路徑，並用白色填充該道。然後，我會做另一個定義軌道的內邊緣並填充紫色。經過一些練習，貝齊爾相當容易上手。據推測，某人編寫的HTML應用程序可能會在導出控制點協調之前繪製曲線。 – enhzflep

我會用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>

來源

2015-09-07 13:48:03

如何使用JavaScript在畫布上繪製跑道

回答

相關問題