HTML5画布尺寸和分辨率

我写了一个简单的例子来展示这一点。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, 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

我想既然画布的大小为500像素，这是奇怪的* 400px和图像的大小是200px * 160px，图像将如何超出c的范围anvas？而且图像似乎已经调整大小。

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

来源

2012-08-22 Ovilia

尝试增加你的画布width和height作为替代属性：

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

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

Example jsFiddle

来源

2012-08-22 09:25:55

它的工作原理，非常感谢！ – Ovilia

当你不加width和height属性canvas标签，那么您呈现与默认width和height画布。和

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

只是通过CSS这个标签伸展。

所以使用<canvas id="canvas" width="500" height="400"></canvas>

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

来源

2012-08-22 09:30:37

但是这不会有什么区别：'' – Ovilia

HTML5画布尺寸和分辨率

回答

相关问题