javascript - HTML5 Canvas 滴计数器

Question

您好，我有一个球落在 html5 Canvas 中，我想要一个计数器来显示球落下的距离。

    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

你的形状在 Canvas 上有一个位置，你应该清楚地定义它以确保安全。

但是如果你想计算你的对象在屏幕上的移动方式，你可以这样做:

   ball.getPosition();

这将以

的形式返回给你一个点

   {x: number, y: number}

您可以像这样保存单个 x,y 值:

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

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