如何在位置上定向自定义画布形状

Question

为了学习JavaScript，我正在制作一个小行星游戏。 这一切都已经完成了，但是我想对太空飞船保持冷静。

我找到了这个Canvas形状指令，它创建了一个飞碟，并将其放在我的draw（）函数中-

Ship.prototype.draw = function(ctx) {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.moveTo(28.4, 16.9);
    ctx.bezierCurveTo(28.4, 19.7, 22.9, 22.0, 16.0, 22.0);
    ctx.bezierCurveTo(9.1, 22.0, 3.6, 19.7, 3.6, 16.9);
    ctx.bezierCurveTo(3.6, 14.1, 9.1, 11.8, 16.0, 11.8);
    ctx.bezierCurveTo(22.9, 11.8, 28.4, 14.1, 28.4, 16.9);
    ctx.closePath();
    ctx.fillStyle = "rgb(222, 103, 0)";
    ctx.fill();

    // Draw saucer top.
    ctx.beginPath();
    ctx.moveTo(22.3, 12.0);
    ctx.bezierCurveTo(22.3, 13.3, 19.4, 14.3, 15.9, 14.3);
    ctx.bezierCurveTo(12.4, 14.3, 9.6, 13.3, 9.6, 12.0);
    ctx.bezierCurveTo(9.6, 10.8, 12.4, 9.7, 15.9, 9.7);
    ctx.bezierCurveTo(19.4, 9.7, 22.3, 10.8, 22.3, 12.0);
    ctx.closePath();
    ctx.fillStyle = "rgb(51, 190, 0)";
    ctx.fill();
    }

船上还有一个pos变量，它是x pos和y pos的数组。

不过，我很困惑，因为我不知道在图纸中应将pos [0]和pos [1]应用于何处，以使太空飞船渲染当前位置。

帮助将不胜感激！

Answer 1

在这种情况下，最简单的方法可能是使用位置来平移画布，而不是重新计算形状的每个点。

例如：

Ship.prototype.draw = function(ctx, pos) {

    ctx.translate(pos[0], pos[1]);  // translate

    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.moveTo(28.4, 16.9);
    ctx.bezierCurveTo(28.4, 19.7, 22.9, 22.0, 16.0, 22.0);
    ctx.bezierCurveTo(9.1, 22.0, 3.6, 19.7, 3.6, 16.9);
    ctx.bezierCurveTo(3.6, 14.1, 9.1, 11.8, 16.0, 11.8);
    ctx.bezierCurveTo(22.9, 11.8, 28.4, 14.1, 28.4, 16.9);
    ctx.closePath();
    ctx.fillStyle = "rgb(222, 103, 0)";
    ctx.fill();

    // Draw saucer top.
    ctx.beginPath();
    ctx.moveTo(22.3, 12.0);
    ctx.bezierCurveTo(22.3, 13.3, 19.4, 14.3, 15.9, 14.3);
    ctx.bezierCurveTo(12.4, 14.3, 9.6, 13.3, 9.6, 12.0);
    ctx.bezierCurveTo(9.6, 10.8, 12.4, 9.7, 15.9, 9.7);
    ctx.bezierCurveTo(19.4, 9.7, 22.3, 10.8, 22.3, 12.0);
    ctx.closePath();
    ctx.fillStyle = "rgb(51, 190, 0)";
    ctx.fill();

    ctx.translate(-pos[0], -pos[1]);  // translate back

}

提示是将形状隔离到屏幕外的画布上，然后使用drawImage()将屏幕上的画布绘制到您的主画布上（使用屏幕外的画布作为图像）。 这样会更快，更容易维护。