0

我注意到在另一个盒子上绘制一个盒子的问题。根据要求，这是代码，但更详细

function draw(x,y,w,h,c){
 ctx.fillStyle=c;
 ctx.strokeStyle=c;
 ctx.lineWidth=1;
 ctx.globalAlpha=1.0;
 ctx.fillRect(x,y,w,h);
}

function Rectangle(x,y,w,h,c){
 this.x=x;
 this.y=y;
 this.w=w;
 this.h=h;
 this.c=c;
 this.draw=draw;

 this.onMouseEnter=function(){
  this.c='rgb(0,0,0)';   //black
  this.draw();
 }

this.onMouseLeave=function(){
 this.c='rgb(255,255,255)';   //white
 this.draw();
 }
}
box=new Rectangle(10,10,110,110,'rgb(255,255,255)');  //black box at

在静止时，盒子是白色的，但在悬停时，它会变成黑色。但是，仍然有一个白色边框。我很确定这不是我的计算错误，因为我正在更改颜色，而不是尺寸。我还注意到这个问题发生在我的大多数其他 onHover 函数中。

为什么 HTML 在绘制其他对象时会出现这些问题。

谢谢

4

1 回答 1

1

如果您使用非 int 值创建矩形，这通常会发生。见http://jsfiddle.net/cwolves/9tZTy/

如果您将数字更改为非整数（例如 25.5），当您单击画布时，您会看到框周围有一个红色的“发光”。

简单的解决方案是将您传递给 fillRect 的每个值设置为底：

ctx.fillRect(x1 << 0, y1 << 0, x2 << 0, y2 << 0);

[编辑]

您的示例似乎使用了整数，因此如果您在我的演示中仍然看到问题，请先调用 clearRect()。

于 2011-03-21T23:59:15.490 回答