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球移动了很多。