Question

Here's我正在努力的笔。

尝试使用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();
  };
}

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

现在，如果你看笔，那么你会发现这是有效的 - 有点像。有些三角形照亮了它们下面或旁边的几个三角形也是相同的颜色（向下指向的三角形从不同的数组中得到它们的颜色）。我相信这些也会在循环中一个接一个地出现，所以我猜测问题是循环或绘制或构造三角形的方式。

我注意到，一次只发出tri.push（）行之一，只显示向下或向上的三角形，这两次都会重新创建问题，并使其更容易看到。

所以，如果有人可以偷看，看看我是否犯了一些明显的错误，我们将非常感谢任何帮助！

Answer 1

好的，我发现了这个错误，但是答应你不会把你的头撞到墙上好吗？

正如您所知，Context2D会忽略错误的参数，因此如果未定义＆＃39;或者喜欢一起睡觉，所以出于好奇，在Triangle.draw我补充道：

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

出现了一些白色三角形。

所以看一下选择颜色的代码，你使用了：

rand = getRandomInt(0, colours.length);

当数组中的最大索引长度为1！
时所以你有不确定的颜色，你的绘画无法使用正确的颜色只需改变你的兰特拣选（！你做两次！）：

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

修复了这个问题......差不多......有时它仍然会失败......

但后来我查看了颜色表...一个是错的（第二个：＆＃34; 145,63％，49％＆＃34;），因此在更改fillStyle时也会被忽略。纠正这个之后，一切都很好！

哎哟！： - ）

正确绘制的形状（三角形） - HTML5 Canvas / JavaScript问题

1 个答案: