javascript - HTML5 画布放置计数器

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;

您可以在动画中保存这些位置并计算球移动了多少。