Javascript 为什么我的球不是圆弧形的？

我正在尝试用javascript制作一个小游戏。但现在一开始我的圈子不是圆的。。。在网上搜索了20分钟后，我不知道该怎么办。希望你们能帮助我

我的问题是：为什么我的圆不是完美的圆

函数画布（）{
var ctx=document.getElementById（'game'）.getContext（'2d'）；
var cw=ctx.canvas.width，
ch=ctx.canvas.height；
var snelheid=1；
函数bal（）{
this.w=20，this.h=10，this.x=（cw*0.5）-（this.w*0.5），this.y=（ch*0.5）-（this.h*0.5），this.color=“黑色”；
this.draw=函数（）{
//动画
这个.x=这个.x+1；
//画
ctx.beginPath（）；
ctx.arc（this.x，this.y，this.w，0，（Math.PI/180）*360）；
ctx.fillStyle=“黑色”；
ctx.closePath（）；
ctx.fill（）；
}
}
函数背景（）{
this.w=cw，this.h=ch，this.x=0，this.y=0，this.color=“#f4”；
this.draw=函数（）{
ctx.fillStyle=this.color；
ctx.fillRect（this.x，this.y，this.w，this.h）；
}
}
var bal=新的bal（）；
var background=新背景（）；
函数绘图（）{
ctx.save（）；
ctx.clearRect（0，0，cw，ch）；
//画
background.draw（）；
bal.draw（）；
ctx.restore（）；
}
var animateInterval=setInterval（绘制，snelheid）；
}
window.addEventListener（'load'，函数（事件）{
画布（）；
});
#游戏{
宽度：500px；
高度：500px；
背景色：；
边框样式：实心；
边框宽度：4px；
边界半径：4px；
边框颜色：#A2A9；
}

请使用新浏览器！
您需要设置画布（元素）的宽度和高度，仅仅CSS是不够的，它会导致缩放（这可能是故意使用的）。见此：


函数画布（）{
var ctx=document.getElementById（'game'）.getContext（'2d'）；
var cw=ctx.canvas.width，
ch=ctx.canvas.height；
var snelheid=1；
函数bal（）{
this.w=20，this.h=10，this.x=（cw*0.5）-（this.w*0.5），this.y=（ch*0.5）-（this.h*0.5），this.color=“黑色”；
this.draw=函数（）{
//动画
这个.x=这个.x+1；
//画
ctx.beginPath（）；
ctx.arc（this.x，this.y，this.w，0，（Math.PI/180）*360）；
ctx.fillStyle=“黑色”；
ctx.closePath（）；
ctx.fill（）；
}
}
函数背景（）{
this.w=cw，this.h=ch，this.x=0，this.y=0，this.color=“#f4”；
this.draw=函数（）{
ctx.fillStyle=this.color；
ctx.fillRect（this.x，this.y，this.w，this.h）；
}
}
var bal=新的bal（）；
var background=新背景（）；
函数绘图（）{
ctx.save（）；
ctx.clearRect（0，0，cw，ch）；
//画
background.draw（）；
bal.draw（）；
ctx.restore（）；
}
var animateInterval=setInterval（绘制，snelheid）；
}
window.addEventListener（'load'，函数（事件）{
画布（）；
});
#游戏{
宽度：500px；
高度：500px；
背景色：；
边框样式：实心；
边框宽度：4px；
边界半径：4px；
边框颜色：#A2A9；
}

请使用新浏览器！
没问题。是的，不要忘记canvas元素有自己的大小，加上CSS样式的大小。