html - Canvas 到图像 : how to keep proportions

Question

这是我的测试代码:http://jsfiddle.net/Zx4fg/

为什么圆在 Canvas 上看起来像椭圆？

我想将网络摄像头的快照保存为图像，但生成的图像不符合比例。

我的真实代码是:

ctx.drawImage(video,0,0, 300, 150); // 300х150 - with this prop. image 
                                    //from webcam on canvas with true proportions
$('body').append($('<img>').attr('src', canvas.toDataURL()));

我变得像这样:

Answer 1

问题出在 Canvas 样式中，您应该在 HTML 中设置其宽度和高度属性。不在 CSS 中

<canvas id="canvas" width="320" height="2400" style="border:1px solid #d3d3d3;">