如何使用HTML5 Canvas複製'撬痕'？

我已經創造了HTML5畫布一個小實驗車的一些基本的運動，那就是：（箭頭鍵移動車）如何使用HTML5 Canvas複製'撬痕'？

http://jsfiddle.net/mpxML/27/

的覺得我一直在努力找出是創建防滑標記的最佳方法。如果您按住向上鍵並轉動，您會看到它會創建一些標記，但如果您再次執行此操作，它們會鏈接在一起。很顯然，我這樣做的方式並不理想。它將座標推向一個數組，然後使用lineTo來連接這些座標。

問題： - 線條連接起來 - 推cordinates到一個數組要記住打滑可能不是最好的方法 - 我只有一條線，所以當我添加另一個，性能將受到影響futher。

你會建議什麼？

鬼鬼祟祟的問題：有一個固定的背景，而不是有一個固定的背景，使場景「平移」的最佳方式是什麼。

感謝，亨利

來源

2011-08-23 Henryz

你爲什麼不重置陣列的每個防滑完成後？ –

哦。那種撬痕。那時不知道！ :) – asawyer

就在我頭頂。你可以有一個單獨的，不可見的畫布，你可以在其上繪製滑動標記，然後在每個繪製週期中繪製滑動元素下面的移動元素？這樣，您不需要跟蹤skidmark位置，也不需要在每一幀上重新繪製它們。（這是假設合併兩個畫布的快速方法，我真的不知道） –

試試這個http://jsfiddle.net/mpxML/34/。

我加了MIN_DIST_TO_DRAW_SKID變量。如果skidMarks中的兩個點比該值更遠，則畫布不繪製線（只需調用moveTo方法）。

這部分代碼，我所做的更改：

// here 
var MIN_DIST_TO_DRAW_SKID = 30; 

function drawStageObjects() { 

    if(car.drift > 30 || car.drift < -30) { 
     skidMarks.push(car.x, car.y); 
    } else { 
    } 

    context.beginPath() 
    context.moveTo(skidMarks[0],skidMarks[1]); 
    for(var i=0; i < skidMarks.length; i = i + 2) { 

     skidPoint = Math.abs(skidMarks[(skidMarks.length-4)]) - Math.abs(skidMarks[(skidMarks.length-2)]); 

     // here 
     var dist = Math.sqrt((skidMarks[i] - skidMarks[i - 2]) * (skidMarks[i] - skidMarks[i - 2]) 
       + (skidMarks[i + 1] - skidMarks[i - 1]) * (skidMarks[i] - skidMarks[i - 1])); 

     if(skidPoint > 20 || dist > MIN_DIST_TO_DRAW_SKID) { 
      context.moveTo(skidMarks[i], skidMarks[i + 1]); 
     } else { 
      context.lineTo(skidMarks[i],skidMarks[i + 1]); 
     } 

     $('#stats').html(skidPoint); 
     //$('#stats').html(skidMarks[(skidMarks.length-4)] + "," +skidMarks[(skidMarks.length-2)]); 
    } 

    //.... 
}

來源

2011-08-23 16:49:52

嘿！感謝你的回答。小提琴似乎並沒有工作，但它是否適合你？謝謝 – Henryz

是的，它工作完美。有什麼問題？ –

@Henryz我添加了代碼，我改變了。如果jsfiddle不工作，您可以嘗試使用該代碼。 –

如何使用HTML5 Canvas複製'撬痕'？

回答

相關問題