我写了一个简单的例子来说明这一点.
画布大小为500px*400px.我的图像的原始大小是200px*160px,dpi为480.我想在画布中以原始大小显示此图像,这样它就不会调整大小,这会使图像模糊.
这是代码:
$(document).ready(function() {
$("#canvas").width(500);
$("#canvas").height(400);
var canvas = $("#canvas").get(0);
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = "fish01.png"; // size is 200px * 160px
ctx.drawImage(image, 0, 0); // same with ctx.drawImage(image, 0, 0, 200, 160);
});
原始图片是:
结果是:
我认为这很奇怪,因为画布的大小是500px*400px,图像的大小是200px*160px,图像如何超出画布的范围?似乎图像已经调整大小.
我想知道如何显示原始大小的图像.请给出一些建议.谢谢!