关于html5 canvas arc方法画圆的问题

Question

var canvas = document.querySelector("#paint"); 
var context = canvas.getContext("2d"); 

context.fillStyle = "rgba(255, 0, 0, 0.2)";   
for (var i = 1; i < 15; i++) { 
context.beginPath(); 
context.arc(30 * i, 30 * i, 10 * i, 0, Math.PI * 2); 
context.fill(); 

}

代码如上

但是为什么画来的都是椭圆

Answer 1

看下canvas的样式是不是设置了height和width，去掉样式, 改为设置canvas的width、height属性, 不要加px

Answer 2

可能是由于没有 context.closePath()的原因