Холст HTML5, как и изображение HTML, имеет как собственный размер - число пикселей в ширину и высоту исходного изображения - так и дисплей размер - насколько он большойрисуется на странице HTML.Если эти два размера установлены по-разному, изображение будет растянуто.
Код jQuery, который вы использовали для создания элемента canvas, устанавливает размер display равным 300x300px, устанавливая CSS width
и height
атрибутов, но не устанавливает внутренний размер *1011* иначе, чем по умолчанию 300x150.Таким образом, все, что вы рисуете, будет растянуто в два раза.
Чтобы исправить это, непосредственно установите фактические атрибуты width
и height
элемента canvas.В следующем коде я сделал это исправление.Я также исправил использование HTML5 DOCTYPE, и я установил img.onload
перед img.src
:
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Setting Canvas Dimensions</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(function(){
var elem = $("<canvas>", {width:300, height:300});
var canvele = elem[0];
canvele.width = canvele.height = 300;
var imm = new Image;
imm.onload = function(){
var ctx = canvele.getContext('2d');
ctx.drawImage(imm, 0,0);
$('body').append(elem);
};
imm.src = "http://phrogz.net/tmp/gkhead.jpg";
});
</script>
</head><body></body></html>