我写了一个简单的例子来说明这一点.
画布大小为500px * 400px.我的图像的原始大小是200px * 160px,dpi为480.我想在画布中以原始大小显示此图像,以便不会调整大小,这会使图像模糊.
这是代码：
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(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); // same with ctx.drawImage(image,200,160);
});
</script>
</head>
<body style="background-color: #ccc; margin: 0px;">
<canvas id="canvas" style="background-color: #66c"></canvas>
</body>
</html>
原始图片是：
结果是：
我认为这很奇怪,因为画布的大小是500px * 400px,图像的大小是200px * 160px,图像如何超出画布的范围？似乎图像已经调整大小.
我想知道如何显示原始大小的图像.请给出一些建议.谢谢！
解决方法
尝试将画布宽度和高度添加为属性：
$("#canvas").attr("width","500px");
$("#canvas").attr("height","400px");
这定义了画布中的可绘制空间,否则我认为默认为2：1.我知道你正在使用.width()和.height(),但它们设置了无单位值,而我们用.attr()明确定义为pixles.
Example jsFiddle