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 'default bitmap размер 300x150 пикселей. Установка размера CSS не изменит размер растрового изображения. Растровое изображение задается с собственными свойствами/атрибутами width/height непосредственно на элементе. Если битмап не будет растянут, чтобы заполнить размер элемента 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); 
}