javascript - 形状(三 Angular 形)绘制不正确 - HTML5 Canvas/JavaScript 问题

Question

Here's我正在做的事情的笔。

使用 Canvas 进行实验我遇到了这个问题，但我无法弄清楚为什么会发生这种情况。该实验是绘制三 Angular 形，然后检测鼠标何时经过每个三 Angular 形。

// 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();
  };
}

注意:这不是全部代码，只是我认为问题所在的一部分。

现在，如果你看看这支笔，你就会发现这在某种程度上是有效的。一些三 Angular 形会点亮其下方或旁边的一些相同颜色的三 Angular 形(向下指向的三 Angular 形从不同的阵列获取颜色)。我相信这些也会在循环中一个接一个地出现，所以我猜测问题要么出在循环上，要么出在三 Angular 形的绘制或构造方式上。

我注意到，一次注释掉 tri.push() 行之一以仅显示向下或向上的三 Angular 形会两次重现该问题，并且使其更容易查看。

所以，如果有人可以看一下我是否犯了一些明显的错误，任何帮助将不胜感激!

Answer 1

好吧，我发现了这个错误，但保证你不会把头撞到墙上，好吗？

正如您所知，Context2D 会忽略错误的参数，因此如果“未定义”或类似参数会休眠，出于好奇，我在 Triangle.draw 中添加了:

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

并且出现了一些白色三 Angular 形。

所以看看选择颜色的代码，您使用了:

rand = getRandomInt(0, colours.length);

当数组中的最大索引为 length - 1 时!
所以你有未定义的颜色，并且你的绘图无法使用正确的颜色。
只需更改您的兰德选择(!您执行两次!):

rand = getRandomInt(0, colours.length-1);

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

但是后来我查看了颜色表...其中一个是错误的(第二个:“145, 63%, 49%”)，因此在更改 fillStyle 时它也会被忽略。改正这个之后，一切就OK了!

哎呀! :-)