Html HTML5 Canvas 大小和分辨率
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12069852/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Canvas size and resolution
提问by Ovilia
I wrote a simple example to show this.
我写了一个简单的例子来说明这一点。
The size of canvas is 500px * 400px. The origin size of my image is 200px * 160px with dpi of 480. I want to display this image in the canvas with the origin size so that it will not be resized, which will blur the image.
画布的大小为 500px * 400px。我的图像的原点大小为 200px * 160px，dpi 为 480。我想以原点大小在画布中显示此图像，以免调整大小，这会使图像模糊。
Here's the code:
这是代码：
<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>
Origin image is:
原图为：
The result is:
结果是：
I think this is strange since the size of canvas is 500px * 400px and the size of image is 200px * 160px, how would the image be out of the range of the canvas? And it seems that the image has been resized.
我觉得这很奇怪，因为画布的大小是 500px * 400px 而图像的大小是 200px * 160px，图像怎么会超出画布的范围？似乎图像已调整大小。
I want to know how to display the image with the origin size. Please give some advice. Thanks!
我想知道如何以原点大小显示图像。请给一些建议。谢谢！
回答by Paul Aldred-Bann
Try adding your canvas widthand heightas attributes instead:
尝试添加您的画布width和height作为属性：
$("#canvas").attr("width", "500px");
$("#canvas").attr("height", "400px");
This defines the drawable space in the canvas, otherwise it defaults to something like 2:1 I think. I know you're using .width()and .height()but they set a unitless value, whereas we're defining it explicitly as pixles with .attr().
这定义了画布中的可绘制空间，否则我认为它默认为 2:1 之类的东西。我知道您正在使用.width()and.height()但他们设置了一个无单位值，而我们将其明确定义为带有.attr().
回答by Danil Speransky
When you don't add widthand heightattributes to canvas tag, then you render on canvas with default widthand height. And
当您不向画布标签添加width和height属性时，您将在画布上使用默认width和height. 和
$("#canvas").width(500);
$("#canvas").height(400);
just stretch by css this tag.
只需通过 css 这个标签拉伸。
So use <canvas id="canvas" width="500" height="400"></canvas>
所以用 <canvas id="canvas" width="500" height="400"></canvas>
Or use $('#canvas').attrfunction
或者使用$('#canvas').attr函数
