Question

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

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在绘制其他对象时会遇到这些问题。

由于

Answer 1

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

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

简单的解决方案是将传递给fillRect的每个值放在一边：

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

[编辑]

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

带有重叠框的html画布分辨率问题

1 个答案: