HTML5画布大小和分辨率

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

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

HTML5画布大小和分辨率

解决方法

相关文章