Question

开发一个简单的画布应用程序，你可以用枪射击子弹，但子弹背后会留下痕迹。我尝试用clearRect清除画布并将画布的宽度设置为自己，但没有运气。这是jsFiddle。相关摘要：

Bullet.prototype：

  OrientationEventListener OrientationEventListener = new OrientationEventListener(this, SensorManager.SENSOR_DELAY_UI) {
        static final int DELTA = 20;

        @Override 
        public void onOrientationChanged(int Angle) {
            float AngleDestination = ButtonDestination;
            if (angle > 90 - DELTA && angle < 90 + DELTA) {
                AngleDestination = -90;
            } else if (Angle > 180 - DELTA && Angle < 180 + DELTA) {
                AngleDestination = 180;
            } else if (Angle > 270 - DELTA && Angle < 270 + DELTA) {
                AngleDestination = 90;
            } else if (Angle > 360 - DELTA || Angle < DELTA) {
                AngleDestination = 0;
            } 
            if (AngleDestination != ButtonDestination) {
                ButtonDestination = AngleDestination;
                MyButton.animate().rotation(ButtonDestination).setDuration(100).start(); 
            } 
        } 
    }; 
    orientationEventListener.enable();
}

更新（）：

$location.path('/chartpage');
$route.reload();

如何防止球离开？

Answer 1

在每个Bullet.draw()上，您将向同一个Path2d添加更多arc形状。 ctx.fill()将适用于整个Path2d，包括＆＃34; trail＆＃34;。

您需要的是在每个Bullet上创建一个新的Path2d。

Bullet.prototype = {
    render: function () {
        ctx.fillStyle = this.color;
        ctx.beginPath(); // this is a new Path2d
        ctx.arc(this.coordinates.x, this.coordinates.y, this.size.radius, 0, Math.PI * 2, false);
        ctx.fill();
        return this;
    },
    animate: function () {
        this.coordinates.x += this.velocity.speed.x;
        return this;
    }
};

请注意，由于arc(x,y,radius,0,2*Math.PI,0)确实是一个封闭的圆弧（圆圈），因此您无需致电ctx.closePath()。

JavaScript画布：球在它后面留下痕迹

1 个答案: