html - 画布到图像：如何保持比例

Question

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

为什么画布上的圆圈看起来像一个椭圆？

我想将网络摄像头的快照保存到图像中，但生成的图像不保持比例。

我的真实代码是：

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

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

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