使用.clearRect（x，y，w，h）的canvas動畫

我是使用javascript和canvas的相對初學者。我會盡力解釋我迄今爲止所做的。我有一個外部樣式表，並且我已經設置了canvas元素的背景（它是一條延伸到地平線中的道路的背景圖像）。然後，我創建了這個第一個函數（drawRoad（）），在道路中心畫出一條細白色的白色條紋，並將其與道路一起拖入地平線。然後我創建了另一個函數（roadLines（）），它在這個白色條中插入空格。我很高興看到它到目前爲止的樣子。使用.clearRect（x，y，w，h）的canvas動畫

我現在要做的就是運行一個循環... drawRoad（），然後roadLines（），然後清空畫布，然後再次繪製路徑（），然後更改roadLines（）的位置和再次調用該函數。我想要垂直向下移動roadline（）的位置，以便它能夠沿着道路行駛。（我希望這是有道理的？）我正在以正確的方式去做這件事嗎？還是有一種更簡單的方式來做到這一點，我完全忽略了？

任何建議將不勝感激。以下是我迄今爲止所做的。另外，函數animate（）在底部，但它所做的只是調用drawRoad（），然後調用roadLines（）。

window.requestAnimFrame = (function (callback) { 
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
function (callback) { 
    window.setTimeout(callback, 1); 
};})(); 

// set function that draws in the canvas 
function drawRoad() { 
    var myCanvas = document.getElementById("myCanvas"); 
    var ctx = myCanvas.getContext("2d"); 
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); 
    ctx.beginPath(); 
    ctx.moveTo(471, 199); 
    ctx.lineTo(467, 600); 
    ctx.lineTo(475, 600); 
    ctx.closePath(); 
    ctx.fillStyle = "rgb(255, 255, 255)"; 
    ctx.fill(); 
    ctx.lineWidth = 1; 
    ctx.strokeStyle = "rgb(255, 255, 255)"; 
} 

//set variables and function/for loop that creates the spacing/intervals for road markings and movement 
function roadLines() { 
var interval = 1; 
var space = 1; 
var myCanvas = document.getElementById("myCanvas"); 
var ctx = myCanvas.getContext("2d"); 
for (var roadLine = 199; roadLine < 600; roadLine = roadLine + interval) { 
    interval = (interval * 1.1); 
    space = (space * 1.05); 
    ctx.clearRect(450, roadLine, 40, space); 
    } 
} 

function animate() { 
    drawRoad(); 
    roadLines(); 
}

來源

2013-10-07 Cactusman07

您必須更改兩次通話之間的「某事」。我會說在你的路線圖中增加一個偏移量，你在每個遊戲步驟中增加一個，然後你調用roadLines（偏移量）。 – GameAlchemist

您需要做的第一件事情就是讓動畫循環實現循環。因爲它是現在它只是打電話給你兩個函數一次，然後退出，所以先調整可以是：

function animate() { 
    drawRoad(); 
    roadLines(); 

    requestAnimationFrame(animate); /// enable a loop 
}

（PS：請確保您重命名聚填補requestAnimFrame到，見下面的演示鏈接）。

我們當然還需要啓動動畫循環，這樣的地方，我們只是把它從全局範圍：

animate();

，我們需要確保接下來的事情是，你的行動，所以我們可以看到他們動畫。

只需提供作爲碼偏移現在不會因爲你不綁定到任何屏幕幾何比例已經開箱的直工作。

這要麼使行「跳躍」當您嘗試循環他們通過復位偏移，或將線條的大小循環運行的時間越長，如果你選擇不復位偏移增長。

所以，你將不得不重新考慮如何繪製線條或作出妥協。

對於你需要找到你復位偏移環路一個「甜蜜點」值的妥協。線越慢，小「跳」就越明顯。

爲了使線條顯得平滑然而，你將需要實現一些簡單的3D投影（或2.5D僞3D類似於您已經有了，但勢必會顯示）。

Here is an online demo其中行現在使用偏移量進行動畫。我在底部添加了一個滑塊，以便您可以找到偏移限制的甜點。試用它看看它是如何工作的。我沒有實現這條線的3D投影，但是使用了你已經有的東西，但是我有基於這篇文章的感覺，理解這裏的基本是第一步。

來源

2013-10-07 19:51:40 K3N

非常感謝！這工作完美。 – Cactusman07

肯 - 出於好奇，我將如何去實現3D投影的線？ – Cactusman07

@ Cactusman07請在這裏看到我的答案：http://stackoverflow.com/questions/18699527/what-is-wrong-with-my-conversion-of-xyz-co-ordinates-to-screen-xy-co-ordinate/18707591＃18707591有了這個，你可以定義x，y，z點並讓它投影（x/y/z在笛卡爾座標系中） – K3N

使用.clearRect（x，y，w，h）的canvas動畫

回答

相關問題