7
मैंने इसे दिखाने के लिए एक सरल उदाहरण लिखा था।एचटीएमएल 5 कैनवास आकार और संकल्प
कैनवास का आकार 500px * 400px है। 480 की डीपीआई के साथ मेरी छवि का मूल आकार 200px * 160px है। मैं इस छवि को कैनवास में मूल आकार के साथ प्रदर्शित करना चाहता हूं ताकि इसका आकार बदला न जाए, जिससे छवि को धुंधला कर दिया जाएगा।
<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 है * 400 पीएक्स और छवि का आकार 200px * 160px है, छवि सी की सीमा से कैसे बाहर होगी anvas? और ऐसा लगता है कि छवि का आकार बदल गया है।
मैं जानना चाहता हूं कि मूल आकार के साथ छवि को कैसे प्रदर्शित किया जाए। कृपया कुछ सलाह दें। धन्यवाद!
यह काम करता है का उपयोग करें,! – Ovilia