以对角线方向更改对象的方向答案

【问题标题】：Changing the Direction of an Object in a Diagonal orientation以对角线方向更改对象的方向
【发布时间】：2020-06-08 00:18:00
【问题描述】：

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

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 开始向下移动然后反弹回来，但我不确定如何更改它以使圆圈沿三角形方向移动从上角到左下角到右下角再回到上角。

【问题讨论】：

标签： javascript html css canvas shapes

【解决方案1】：

如果我理解正确...
您想创建一个圆圈在三角形循环中移动的动画。

我在那个例子中看到太多代码，不知道为什么我们需要随机，也没有显示createData 函数的使用方式/位置...

我会这样做：

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);

&lt;canvas id="canvas" width=150 height=150&gt;&lt;/canvas&gt;

您并没有真正指定什么类型的三角形，所以为了简单起见，我编写了一个直角三角形...
在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

【讨论】：