在画布上绘制图像 - 比实际更大

Question

我想在画布上从jpg文件中绘制一个图像.我的代码:

var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();

  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0);
  };
  imageObj.src = 'img/my_image.jpg';

问题是画布上的图像比文件中的图像大得多.为什么？如何绘制实际尺寸的图像？

更新:结果:http://jsfiddle.net/AJK2t/

Answer 1

这是你的问题:

<canvas style="width: 700px; height: 400px;" id="konf"></canvas>

您正在设置画布的可视大小,但不是像素数.因此,浏览器正在缩放画布像素.

最简单的解决方法是:

<canvas width="700" height="400" id="konf"></canvas>

的width和height参数控制在画布的像素的数量.没有CSS样式,画布的默认视觉大小也将是这个大小,导致每个屏幕像素一个画布像素(假设您没有缩放Web浏览器).

从我对相关问题的回答中复制/粘贴:

想想会发生什么,如果你有一个JPG那是 32×32(它具有完全相同总共1024个像素),但通过CSS,它应该指定出现的width:800px; height:16px.同样适用于HTML Canvas:

• 在width和heightcanvas元素本身的属性决定你能有多少像素借鉴.如果未指定canvas元素的高度和宽度,则根据规范:
  "width属性默认为300,height属性默认为150."

• 的width和heightCSS属性控制该屏幕上的显示元件的大小.如果未设置CSS尺寸,则元素的内在大小用于布局.

如果在CSS中指定的尺寸与画布的实际尺寸不同,则必须根据需要对浏览器进行拉伸和压缩以进行显示.你可以在这里看到一个例子:http://jsfiddle.net/9bheb/5/