Question

我现在正在学习javascript，所以我还是新手。我有一个我在HTML画布中绘制的图像。它们的大小相同，但为了减少代码，我想知道是否可以在变量中调整一个而只调整第二个的位置？

继承我的代码：

                // Cloud 1
                ctx.beginPath();
                ctx.fillStyle = "#fff";
                ctx.ellipse(320, 170, 38, 25, 0 * Math.PI/180, 0, 2 * Math.PI);
                ctx.ellipse(340, 156, 32, 35, 0 * Math.PI/180, 0, 2 * Math.PI);
                ctx.ellipse(368, 174, 32, 26, 0 * Math.PI/180, 0, 2 * Math.PI);
                ctx.ellipse(390, 174, 32, 26, 0 * Math.PI/180, 0, 2 * Math.PI);
                ctx.ellipse(392, 173, 30, 26, 0 * Math.PI/180, 0, 2 * Math.PI);
                ctx.fill();

                // Cloud 2
                ctx.beginPath();
                ctx.fillStyle = "#fff";
                ctx.ellipse(720, 100, 38, 25, 0 * Math.PI/180, 0, 2 * Math.PI);
                ctx.ellipse(740, 86, 32, 35, 0 * Math.PI/180, 0, 2 * Math.PI);
                ctx.ellipse(768, 104, 32, 26, 0 * Math.PI/180, 0, 2 * Math.PI);
                ctx.ellipse(790, 104, 32, 26, 0 * Math.PI/180, 0, 2 * Math.PI);
                ctx.ellipse(792, 103, 30, 26, 0 * Math.PI/180, 0, 2 * Math.PI);
                ctx.fill();

Answer 1

您可以获取画布的当前图像数据并将其放回不同的位置：

var data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.putImageData(data, deltaX, deltaY);

deltaX和deltaY是您想要水平和垂直移动图像的位置。

在你的情况下，deltaX为400，deltaY为-70。

Answer 2

var clouds =  [];

clouds.push({x: 320, y: 170});

clouds.push({x: 324, y: 156});

....

.... 


for (cloud = 0; cloud <10; cloud++){
    ctx.ellipse(clouds[cloud].x, clouds[cloud].y, 30, 26, 0 * Math.PI/180, 0, 2 * Math.PI);
}

JavaScript - 一个var 3形状

2 个答案: