Question

我写了一个简单的例子来说明这一点。

画布大小为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>

原始图片是：

200px * 160px

结果是： enter image description here

我觉得这很奇怪，因为画布大小为500px * 400px，图像大小为200px * 160px，图像如何超出画布范围？似乎图像已经调整大小。

我想知道如何使用原点大小显示图像。请给出一些建议。谢谢！

Answer 1

尝试添加您的画布width和height作为属性：

$("#canvas").attr("width", "500px");
$("#canvas").attr("height", "400px");

这定义了画布中的可绘制空间，否则我认为它默认为2：1。我知道您正在使用.width()和.height()，但他们设置了无单位值，而我们将其明确定义为带.attr()的像素。

Example jsFiddle

Answer 2

如果不向canvas标记添加width和height属性，则在画布上使用默认width和height进行渲染。并且

$("#canvas").width(500);
$("#canvas").height(400);

只需通过css拉伸此标签。

因此请使用<canvas id="canvas" width="500" height="400"></canvas>

或使用$('#canvas').attr功能

HTML5画布大小和分辨率

2 个答案: