7
Tôi đã viết một ví dụ đơn giản để hiển thị điều này.Kích thước và độ phân giải Canvas HTML5
Kích thước canvas là 500px * 400px. Kích thước gốc của hình ảnh của tôi là 200px * 160px với dpi 480. Tôi muốn hiển thị hình ảnh này trong canvas với kích thước gốc để nó không bị thay đổi kích thước, điều này sẽ làm mờ hình ảnh.
Dưới đây là các mã:
<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>
ảnh xứ là:
Kết quả là: 
Tôi nghĩ rằng đây là kỳ lạ kể từ khi kích thước của canvas là 500px * 400px và kích thước hình ảnh là 200px * 160px, hình ảnh sẽ nằm ngoài phạm vi của c như thế nào anvas? Và có vẻ như hình ảnh đã được thay đổi kích thước.
Tôi muốn biết cách hiển thị hình ảnh với kích thước gốc. Vui lòng đưa ra một số lời khuyên. Cảm ơn!
Nó hoạt động, cảm ơn rất nhiều! – Ovilia