改变对象的对角线方向

Question

我正在尝试使对象以三角形形状移动，但是，在更改方向时遇到了一些麻烦。我一直在参考我的讲义，但似乎无法改变我想要的内容。

function aniLoop(){
    clear();
    circlesUpdate(aC);
    requestAnimationFrame(aniLoop)
}
function circlesUpdate(a){
    for (var i = 0; i<a.length; i++){
        circle(a[i]);
        updateData(a[i]);
    }
}
function circle(o){
    ctx.beginPath();
    ctx.arc(o.x, o.y, o.r, 0, 2*Math.PI);
    ctx.fillStyle = "hsla("+o.c+", 100%, 50%, "+o.a+")";
    ctx.fill();
}
function randn(r){
    return Math.random()*r - r/2
}
function rand(r){
    return Math.random()*r
}

我正在尝试绕圈画圈，以从画布大小的w / 2和h / 5开始的三角形移动。

function createData(num){
    for (var i = 0; i<num; i++){
        aC.push({
            x: w/2,
            dx: randn(0),
            y: h/5,
            dy: 2+rand(3),
            r: 50,
            c: 200+rand(60),
            a: 0.5,
        })
    }
}
function clear(){
    ctx.clearRect(0, 0, w, h);
}
function updateData(o){
    var i;
    o.x += o.dx;
    o.y += o.dy;
    o.a -= o.da;  
    if(o.x > w || o.x < 0){
        o.dx *= -1;
    }
    if(o.y > h || o.y < 0){
        o.dy *= -1;
    }
}

我知道该功能已设置为使圆从w / 2，h / 5开始，然后向下移动然后向上弹回，但是我不确定如何更改，以便使圆从以下位置沿三角形方向移动左上角到右下角，然后再回到上角。

Answer 1

如果我理解正确，您想在三角形循环中移动一个圆...这是可以做的：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var i = 0, n = 1
var points = [[10,10], [80,10], [10,80]]
var speed  = [  [1,0], [-1, 1],  [0,-1]]
var p = points[i]

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(p[0], p[1], 5, 2* Math.PI, 0);
  ctx.fill()
  
  p = [p[0]+speed[i][0], p[1]+speed[i][1]]
  if (Math.hypot(p[0]-points[n][0], p[1]-points[n][1]) < 2) {
    i = n
    n = (n+1) % points.length
  }  
}

setInterval(draw, 30);

<canvas id="canvas" width=150 height=150></canvas>

您并没有真正指定哪种类型的三角形，为简单起见，我编写了一个直角三角形...在points = [[10,10], [80,10], [10,80]]上这些是我们三角形的拐角

并且在speed = [ [1,0], [-1, 1], [0,-1]]那就是我们的物体（想要更快地将那些1更改为2）

的速度

---

我们的数学运算最少：p = [p[0]+speed[i][0], p[1]+speed[i][1]]仅以当前速度增加位置

以及if语句：if (Math.hypot(p[0]-points[n][0], p[1]-points[n][1]) < 2)我们只是在检查到下一个点的距离，如果距离少于2个像素，我们会将“当前”索引更改为下一个i = n