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

时间:2014-12-18 09:28:45

标签: javascript html5 canvas geometry

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()行之一,只显示向下或向上的三角形,这两次都会重新创建问题,并使其更容易看到。

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

1 个答案:

答案 0 :(得分: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时也会被忽略。 纠正这个之后,一切都很好!

哎哟! : - )