読者です 読者をやめる 読者になる 読者になる

やったこと

webサービスを作るときに考えたことを垂れ流します

canvas要素で画像をつぎはぎ表示すると境界線が見えてしまう

プログラミング

htmlのcanvas要素で、大きな画像を4分割してつぎはぎ表示しようとしたら、つぎはぎの境界線が表示されてしまって困った(白い線みたいのが見えてしまう)。

Chromeでは境界線が表示されないのに、IEとかFireFoxでは境界線が表示されてしまうようで、発見が遅れた。

どうやらcanvasのdrawImageに小数点の値を入れてしまうとこのようになってしまうらしい。

以下ダメな例。こう書くとつぎはぎの境界に白い線が見えてしまう。

var imgsizeW = (img.width/2);
var imgsizeH = (img.height/2);
var XMAX = 2; //4分割
var YMAX = 2; //4分割
for (var x = 0; x < XMAX; x++){
  for (var y = 0; y < YMAX; y++){
    context.drawImage(img, (x * img.width / XMAX), (y * img.height / YMAX),
                      (img.width / XMAX), (img.height / YMAX),
                      (x * imgsizeW / XMAX), (y * imgsizeH / YMAX),
                      (imgsizeW / XMAX), (imgsizeH / YMAX));
  }
}

以下のように座標の小数点を繰り上げると、境界線なしにつぎはぎ表示ができた。

var imgsizeW = (img.width/2);
var imgsizeH = (img.height/2);
var XMAX = 2; //4分割
var YMAX = 2; //4分割
for (var x = 0; x < XMAX; x++){
  for (var y = 0; y < YMAX; y++){
    context.drawImage(img, (x * img.width / XMAX), (y * img.height / YMAX),
                      Math.ceil(img.width / XMAX), Math.ceil(img.height / YMAX),
                      (x * imgsizeW / XMAX), (y * imgsizeH / YMAX),
                      Math.ceil(imgsizeW / XMAX), Math.ceil(imgsizeH / YMAX));
  }
}