HTML5 画布大小和分辨率
Posted
技术标签:
【中文标题】HTML5 画布大小和分辨率【英文标题】：HTML5 Canvas size and resolution 【发布时间】：2012-08-17 16:24:13 【问题描述】：我写了一个简单的例子来说明这一点。
画布大小为 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>
原图是：
结果是：
我觉得这很奇怪，因为画布的大小是 500px * 400px，而图像的大小是 200px * 160px，图像怎么会超出画布的范围？并且似乎图像已调整大小。
我想知道如何以原始尺寸显示图像。请给一些建议。谢谢！
【问题讨论】：
【参考方案1】：尝试将您的画布 width 和 height 添加为属性：
$("#canvas").attr("width", "500px");
$("#canvas").attr("height", "400px");
这定义了画布中的可绘制空间，否则我认为它默认为 2:1。我知道您使用的是 .width() 和 .height()，但它们设置了一个无单位值，而我们将其明确定义为带有 .attr() 的像素。
Example jsFiddle
【讨论】：
【参考方案2】：当您不将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>以上是关于HTML5 画布大小和分辨率的主要内容，如果未能解决你的问题，请参考以下文章