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以外の値でrectを作成している場合によく発生します。http://jsfiddle.net/cwolves/9tZTy/を参照してください

数値を非整数（例：25.5）に変更すると、キャンバスをクリックすると、ボックスの周りに赤い「グロー」が表示されます。

簡単な解決策は、fillRectに渡すすべての値をフロア化することです。

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

[編集]

あなたの例はintを使用しているようです。それでも私のデモで問題が発生する場合は、最初にclearRect（）を呼び出してください。

于 2011-03-21T23:59:15.490 に答える