HTML5 Canvas drawImage大小調整問題

Question

當我使用drawImage 調整從Spritesheet上的特定位置拉出的圖像的大小時 ，似乎drawImage有時會拉出源x +源y /寬度+高度邊界。

以下jfiddle說明了正在發生的事情： https ://jsfiddle.net/cxuxyLj2/

相關代碼如下：

drawingSurface.drawImage(heroSprite, 0, 64, 32, 64, 20, 144, 32, 64);
drawingSurface.drawImage(heroSprite, 0, 64, 32, 64, 20+50, 144, 32*2, 64*2);

在RESIZED Sprite的頭部上方顯示了一些線（可能在第一行中拖動了具有相同角色的鞋子），但沒有顯示原始Sprite的頭部。

我的問題是-是否可以確認這是合法的drawImage錯誤，還是我做錯了什么？

Answer 1

實際上，這是因為調整精靈大小時的抗鋸齒功能。
因為您確實是在循環中繪制，而不需要清除上下文，所以抗鋸齒工件變得越來越大：

 var canvas = document.querySelector("canvas"); var drawingSurface = canvas.getContext("2d"); var heroSprite = new Image(); heroSprite.src = "http://gopus.xepher.net/game/gfx/herosprite7.png"; render(); function render () { setTimeout(render, 1000); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 20, 25, 32, 64); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 20+50, 25, 32*2, 64*2); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 150.6666687774, 25.33333222227, 32,64); } 

 <canvas width="400" height="400" style="border:1px solid #000"></canvas> 

您可以通過將imageSmoothingEnabled標志設置為false來避免這種情況，但是在IE 10之前的版本中不支持它...

 var canvas = document.querySelector("canvas"); var drawingSurface = canvas.getContext("2d"); drawingSurface.mozImageSmoothingEnabled = false; drawingSurface.webkitImageSmoothingEnabled = false; drawingSurface.msImageSmoothingEnabled = false; drawingSurface.imageSmoothingEnabled = false; var heroSprite = new Image(); heroSprite.src = "http://gopus.xepher.net/game/gfx/herosprite7.png"; render(); function render() { setTimeout(render, 16); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 20, 25, 32, 64); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 20 + 50, 25, 32 * 2, 64 * 2); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 150.6666687774, 25.33333222227, 32, 64); } 

 <canvas width="400" height="400" style="border:1px solid #000"></canvas> 

...或通過在每次調用時清除畫布，可以避免工件增長，但是仍然會出現自然現象...

 var canvas = document.querySelector("canvas"); var drawingSurface = canvas.getContext("2d"); var heroSprite = new Image(); heroSprite.src = "http://gopus.xepher.net/game/gfx/herosprite7.png"; render(); function render() { setTimeout(render, 16); drawingSurface.clearRect(0,0,canvas.width, canvas.height); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 20, 25, 32, 64); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 20 + 50, 25, 32 * 2, 64 * 2); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 150.6666687774, 25.33333222227, 32, 64); } 

 <canvas width="400" height="400" style="border:1px solid #000"></canvas> 

...所以最后的解決方案是使用緩沖畫布，僅以正常比例繪制精靈（可能減少抗鋸齒），然后以所需比例重新繪制此緩沖畫布，您將保持圖像中的抗鋸齒文物，但不會再吃掉裁剪區域的邊界了：

 var canvas = document.querySelector("canvas"); var drawingSurface = canvas.getContext("2d"); var heroSprite = new Image(); heroSprite.src = "http://gopus.xepher.net/game/gfx/herosprite7.png"; var spriteCanvas = document.createElement('canvas'); var spriteCtx = spriteCanvas.getContext('2d'); var croppedSprite = function(x, y, width, height){ spriteCanvas.width = width; spriteCanvas.height = height; spriteCtx.drawImage(heroSprite, x, y, width, height, 0,0, width, height); return spriteCanvas; } render(); function render() { setTimeout(render, 16); drawingSurface.drawImage(croppedSprite(0, 64, 32, 64), 20, 25, 32, 64); drawingSurface.drawImage(croppedSprite(0, 64, 32, 64), 20 + 50, 25, 32 * 2, 64 * 2); drawingSurface.drawImage(croppedSprite(0, 64, 32, 64), 150.6666687774, 25.33333222227, 32, 64); } 

 <canvas width="400" height="400" style="border:1px solid #000"></canvas> 

另外，您絕對應該在子畫面之間添加更多空間。