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)); } }