logo标签列表

HTML5画布的尺寸和分辨率

csshtmldomcanvas
8

我写了一个简单的例子来展示这个问题。

画布的大小是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，为什么图像会超出画布范围？而且似乎图像已经被调整大小。

我想知道如何以原始大小显示图像。请给予一些建议。谢谢！

2个回答
13

试着将你的画布width和height作为属性添加：

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

这定义了画布中的可绘空间，否则它会默认为类似2:1的比例。我知道您正在使用.width()和.height()，但它们设置的是无单位值，而我们在这里使用.attr()来明确地定义像素。

示例 jsFiddle

4
当你在canvas标签中不添加width和height属性时，就会使用默认的width和height来呈现画布。
$("#canvas").width(500);
$("#canvas").height(400);

只需通过CSS对此标记进行拉伸。

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

或使用$('#canvas').attr函数。

但这不会有任何影响: <canvas id="canvas" style="width: 500px; height: 400px; background-color: #66c"></canvas> - Ovilia
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接