Question

我正在试图弄清楚如何在画布中使用JS移动元素，这是我准备的内容：https://jsfiddle.net/ge1o2bt1/。

因此，例如，我希望“粒子”上的构造函数有一个名为turn的函数，你可以传递角度和半径，例如，如果在转动90°之后它会转到x++; y+=0它应该转去x+=0; y++。

这是移动对象的代码（在构造函数内）：

this.move = function(){
    this.x+=1;
};

然后根据x和y位置在画布上绘制。在此先感谢，我尝试了许多内容，例如使用Math.cos和Math.sin或使用context.rotate和save()以及restore()。我的数学不是很好，所以我无法弄清楚如何做到这一点。

编辑：使用一些教程我可以重构代码并做到这一点：https://jsfiddle.net/g2c9hf1p/。现在，当您单击时，对象将转动x度（我将其设置为90），但您无法给出半径，因为它取决于速度。

Answer 1

你可以使用一个变量作为方向和一个带有对象的数组，它保持坐标的增量。

var direction = 0;
var directions = [{ x: 1, y: 0 }, { x: 0, y: 1 }, { x: -1, y: 0 }, { x: 0, y: -1 }];

要更改坐标，只需添加方向。

this.move = function () {
    this.x += directions[direction].x;
    this.y += directions[direction].y;
};

用于改变方向，增加方向和长度限制。

window.addEventListener('click', function () {
    direction++;
    direction = direction % directions.length;
});

function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var width = window.innerWidth;
var height = window.innerHeight;

canvas.width = width;
canvas.height = height;

var t = 0;

function clearCanvas() {
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, width, height);
}

clearCanvas();

function circle(x, y, radius) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.closePath();
}

var part = new Particle(0, height / 2);

var rotation = 0;

var direction = 0;
var directions = [{ x: 1, y: 0 }, { x: 0, y: 1 }, { x: -1, y: 0 }, { x: 0, y: -1 }];

function loop() {
    part.move();
    part.draw();

    requestAnimationFrame(loop);
    t++;
}

function Particle(x, y) {
    this.x = x;
    this.y = y;
    this.color = 'hsl(' + t + ',100%,50%)';
    this.radius = 1;

    this.move = function () {
        this.x += directions[direction].x;
        this.y += directions[direction].y;
    };

    this.draw = function () {
        this.color = 'hsl(' + t + ',100%,50%)';
        ctx.fillStyle = this.color;
        circle(this.x, this.y, this.radius);
        ctx.fill();
    };
}

loop();

window.addEventListener('click', function () {
    direction++;
    direction = direction % directions.length;
});

window.addEventListener('resize', function () {
    width = window.innerWidth;
    height = window.innerHeight;

    canvas.width = width;
    canvas.height = height;

    clearCanvas();
});

* { padding: 0; margin: 0; }
body {  overflow: hidden; }

<canvas id="canvas"></canvas>

Canvas - make element在给定半径和角度的情况下进行平滑转动

1 个答案: