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()将该画布绘制到主画布（使用屏幕外画布作为图像）。这将更快，更容易维护。

如何定位自定义帆布形状的位置

1 个答案: