Question

我想做类似这张图片

，我不知道如何在我的代码中解决此问题。我在html.my中使用canvas我的问题是我的变量在上一个数组索引之后没有改变，我认为这一定是问题所在，所以我希望你们能帮助我解决这个代码，而不是更改它

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
c.width = window.innerWidth - 25;
c.height = window.innerHeight - 25;
var i = 0;
var point = {x:0,y:100};
var array = [{x:50,y:0},{x:5,y:0}];
var EPX = point.x + (array[i].x);
var EPY = point.y + (array[i].y);
function draw () 
{
if(point.x == EPX && point.y == EPY)
{
    i += 1;
    EPX = point.x + (array[i].x);
    EPY = point.y + (array[i].y);
}
else
{
    if(point.x == EPX)
    {
    }
    else if(point.x > EPX)
    {
        point.x -= 1;
    }
    else if(point.x < EPX)
    {
        point.x += 1;
    }
    if(point.y == EPY)
    {
    }
    else if(point.y > EPY)
    {
        point.y -= 1;
    }
    else if(point.x < EPY)
    {
        point.y += 1;
    }
}
  ctx.beginPath();
  ctx.arc(point.x,point.y, 3, 0, 2*Math.PI);
  ctx.closePath();
  ctx.fill();
}
function init () 
{
  if(point.x == EPX && point.y == EPY)
  {
    if(i == array.length - 1)
    {
        i = 0;
    }
  }
  draw();
  requestAnimationFrame(init)
}
init();

Answer 1

读者的想法

draw函数中有很多嵌套的if语句，我会考虑将这个大函数分解为一组较小的函数，并根据它们的功能命名。这是一个健康的习惯，即尝试减少功能，直到每个功能都（也称为single responsibility）

对命名的一些挑剔：

尽量避免使用名称，该名称不会告诉您有关变量的用途的信息。经典的 bad 名称为type，variable，stuff，array，number，number2等我知道，一开始很想跳到做的代码（业务逻辑）是很诱人的，但是请相信我，该逻辑会使 so 变得非常多如果名字很好，那就更有意义了，以后您（以及其他人）会感谢您！

鉴于此，我将重命名变量array，因为我已经知道，它是一个包含其内容的数组...但是它的含义是？为什么存在？看起来它包含一组 points 。此数组中描述的点是否与“心跳”样式的输出图像的波形（峰，谷，板块...）相关？也许更好的名字是waveformPoints（数组通常使用复数s）。

当我看到您的变量point时，它已经是一个很好的名字了，它具有x和y作为属性，并且点位于x和y轴上！但是，尽管很好。会更好吗？这是什么种类？为什么存在？这是您要绘制到屏幕上的点吗？也许应该将其称为linePoint，outputPoint或finalPoint。这个变量很难命名，实际上point在这里并不是一个坏名字，但我只是想提出一个 point 而不是总是问why does this exist?自己，想出一个变量名。

我不确定变量EPX和EPY的含义。我相当确定**X和**Y与画布的X和Y轴相关，但是我仍然渴望在这些变量名后面多一点（以进一步说明它们对我的意图）！）。

如果您要多次调用该函数，则可能不应命名该函数init（至少不打算初始化）。每当您想要重绘场景时，您都在调用它，这会使人流连忘返。当您调用requestAnimationFrame时，它将为每帧重绘（通常最高60fps）调用回调。我知道您想清除 / 初始化您循环中的画布图形，但是我仍然想将其命名为init以外的名称！（也许drawLoop？命名很难）

如何使用画布解决此JavaScript问题

1 个答案:

读者的想法

对命名的一些挑剔：