HTML5画布大小和分辨率
Ovi*_*lia 8 html css html5 dom canvas
我写了一个简单的例子来说明这一点.
画布大小为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, 0); // same with ctx.drawImage(image, 0, 0, 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,图像如何超出画布的范围？似乎图像已经调整大小.
我想知道如何显示原始大小的图像.请给出一些建议.谢谢!
Pau*_*ann 13
尝试添加画布width并height改为:
$("#canvas").attr("width", "500px");
$("#canvas").attr("height", "400px");
这定义了画布中的可绘制空间,否则我认为默认为2:1.我知道你正在使用它.width(),.height()但它们设置了无单位值,而我们将它明确地定义为带有像素的像素.attr().