HTML5 canvas drop counter

Question

您好，我在一個html5畫布上放了一個球，我想要一個顯示球落下多遠的計數器。

var ball = new Kinetic.Shape(function(){ 
     var context = this.getContext(); 
     context.beginPath(); 
     context.arc(0, 0, radius, 0, 2 * Math.PI, false); 
     context.fillStyle = "black"; 
     context.fill(); 
    }); 

有人任何想法如何做到這一點？

Answer 1

你的形狀在畫布上有一個位置，你應該清楚地確定它的位置。

但是，如果你要計算你的對象在屏幕上如何移動，你可以這樣做：

ball.getPosition(); 

這將返回你的

{x: number, y: number} 

形式可以保存點個人x，y值如下：

var xPosition = ball.getPosition().x; 
    var yPosition = ball.getPosition().y; 

您可以在動畫中保存這些位置，並執行ho球移動了很多。