canvas.drawImage將裁剪的圖像吹成比例

Question

渲染以下圖像時（右鍵單擊+查看圖像以查看完整大小）：

大小為4800x320，帶有html5 canvas.drawImage()並嘗試從中裁剪出部分480x320的圖像，畫布會將圖像放大。

這是我的代碼：

var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'my-canvas');
canvas.style.width = 480;
canvas.style.height = 320;
canvas.style.display = 'block';

document.body.appendChild(canvas);

var img=document.createElement('img');
img.src='http://cdn.cocimg.com/bbs/attachment/Fid_14/14_29173_56b5563d9a81a86.png';
img.onload = function () {
  var c=document.getElementById('my-canvas');
  var ctx=c.getContext('2d');
  ctx.drawImage(img,480,0,480,320,0,0,480,320);
}

另外，當我以較小的比例繪制圖像時，它突然適合：

var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'my-canvas');
canvas.style.width = 480;
canvas.style.height = 320;
canvas.style.display = 'block';

document.body.appendChild(canvas);

var img=document.createElement('img');
img.src='http://cdn.cocimg.com/bbs/attachment/Fid_14/14_29173_56b5563d9a81a86.png';
img.onload = function () {
  var c=document.getElementById('my-canvas');
  var ctx=c.getContext('2d');
  ctx.drawImage(img,480,0,480,320,0,0,240,160);
}

有人知道為什么嗎？

Answer 1

Canvas的默認位圖大小為300x150像素。 設置CSS大小不會更改位圖大小。 使用位圖的寬度/高度屬性/屬性直接在元素上進行設置。 如果不是，則將拉伸位圖以填充元素CSS大小。

更改這些：

canvas.style.width = 480;
canvas.style.height = 320;

至

canvas.width = 480;
canvas.height = 320;

您還可以設置代碼以重用上下文：

//var c=document.getElementById('my-canvas'); // you already have this as canvas
var ctx=canvas.getContext('2d');              // global/parent scope

var img=document.createElement('img');
img.src='http://cdn.cocimg.com/bbs/attachment/Fid_14/14_29173_56b5563d9a81a86.png';
img.onload = function () {
  ctx.drawImage(img,480,0,480,320,0,0,480,320);
}