形状（三角形）绘制错误-HTML5画布/JavaScript问题

我正在写的那支笔

在使用Canvas进行实验时，我遇到了这个问题，但我不知道为什么会发生这种情况。实验是画三角形，然后检测鼠标何时越过每个三角形

// loop to create triangles
for (var x=0;x<cols;x++) {
 for (var y=0;y<rows;y++){

  // random int for colour array
  var rand = getRandomInt(0, colours.length);

  // downward pointing triangles
  tri.push(new Triangle(x*tWidth,y*tWidth,(x*tWidth)+tWidth,y*tWidth,(x*tWidth)+(tWidth/2),y*tHeight+tHeight, colours[rand], lightness[rand]));

  rand = getRandomInt(0, colours.length);

  //upward point triangles
  tri.push(new Triangle(x*tWidth,y*tWidth,(x*tWidth)-(tWidth/2),y*tWidth+tHeight,(x*tWidth)+(tWidth/2),(y*tHeight)+tHeight, colours2[rand], lightness2[rand]));


 }
}


function Triangle(x1,y1,x2,y2,x3,y3, colour, lightness) {
  this.x1 = x1;
  this.y1 = y1;
  this.x2 = x2;
  this.y2 = y2;
  this.x3 = x3;
  this.y3 = y3;
  this.colour = colour;
  this.lightness = lightness;
  var newlightness = lightness-20;
  //var area, areaOne, areaTwo, areaThree;
  var inside = true;

  this.calculateArea = function() {
    this.a = (x1 - x3);
    this.b = (y1 - y3);
    this.c = (x2 - x3);
    this.d = (y2 - y3);
    this.area = (0.5*Math.abs((this.a*this.d)-(this.b*this.c)));
    //console.log(this.area);
  };

  this.checkIfInside = function(mouseX, mouseY){
    this.areaOne = calculateArea(mouseX, mouseY, this.x2,this.y2,this.x3,this.y3);
    this.areaTwo = calculateArea(mouseX, mouseY, this.x1,this.y1,this.x3,this.y3);
    this.areaThree = calculateArea(mouseX, mouseY, this.x1,this.y1,this.x2,this.y2);
    if ((this.areaOne + this.areaTwo + this.areaThree)>this.area) {
      this.inside = true;
      //console.log(this.area);
    } else {
      this.inside = false;
    }
  };

  this.update = function(){
    if (this.inside) {
      //console.log(true);
      newlightness--;
      if (newlightness < this.lightness-20) {
        newlightness = this.lightness-20;
      }
    } else {
      newlightness = this.lightness+20;
    }
  };
  this.draw = function(){
    var c = "hsl(" + this.colour + ", " + newlightness + "%)";
    ctx.beginPath();
    ctx.moveTo(this.x1,this.y1);
    ctx.lineTo(this.x2,this.y2);
    ctx.lineTo(this.x3,this.y3);
    ctx.fillStyle = c;
    //ctx.strokeStyle = c;
    //ctx.stroke();
    ctx.fill();
    ctx.closePath();
  };
}

//循环以创建三角形
对于（var x=0；x好的，我发现了这个bug，但我保证你不会把头撞到墙上，好吗

您可能知道，Context2D忽略了一个错误的参数，因此如果出于好奇，在Triangle.draw中出现了一个“undefined”或类似的问题，我添加了：

var c = "hsl(" + this.colour + ", " + newlightness + "%)";
if (!this.colour) c='#FFF';      

一些白色的三角形出现了

因此，查看选择颜色的代码，您使用：

rand = getRandomInt(0, colours.length);

当数组中的最大索引长度为-1时！

因此，您有未定义的颜色，并且您的绘图无法使用正确的颜色。

通过以下方式更改您的兰德选择（！您可以重复两次！）：

修复了问题…几乎…有时仍然失败

但后来我看了一下颜色表…一个是错误的（第二个是：“145，63%，49%”），所以在更改填充样式时也忽略了它。
纠正这一点后，一切都很好

哎哟！：-）
非常感谢！我不知道Context2D会忽略错误（我感到困惑的原因是没有记录错误，现在我知道了）。谢谢你花时间看一看，我真的很感激-看看你是如何解决这些错误也很有用，因为我还在学习，所以是的，它现在起作用了，我很高兴！还有，是的，我两次抓取了一个新的随机整数，这不好吗？如果我不这样做，颜色就会成对出现，整个事情看起来就不那么随机了。也许有更聪明的方法？不管怎样，再次谢谢你。不客气。关于兰德公司的事，我只是想确定你没有忘记第二个电话，仅此而已！Javascript没有通知错误这一事实让我非常恼火，我现在更喜欢Google Dart，Dart（以及其他）即使在您键入时也能检测到的错误不会浪费更多的时间！！可惜还没有飞镖密码笔。。。无论如何，祝你在图形冒险中好运！
rand = getRandomInt(0, colours.length-1);