html5 - canvas制作圆形，出来的是椭圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas绘制时钟</title>
<style>
p{
text-align: center;
margin-top: 250px;
}
#clock{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<p>
<canvas style="width:200px ;height:200px" id="clock"></canvas>
</p>
<script type="text/javascript" src="js/clock.js"></script>
</body>
</html>var dom=document.getElementById("clock");//获取canvas的id
var ctx=dom.getContext("2d");//获取上下文，HTML5不支持3d
var width=ctx.canvas.width;//
var height=ctx.canvas.height;
var r=width/2;
//定义一个方法画圆
function drawBackground(){
ctx.save();
//转换坐标
ctx.translate(r,r);
ctx.lineWidth=10;
//获取路径
ctx.beginPath();
//画圆
ctx.arc(0,0,r-5,0,2*Math.PI,false);
//绘制当前路径
ctx.stroke();
}
//执行方法
drawBackground();代码如上，但是出来如下图，，，不解，，，有大神可以给解释一下吗？？头一次学习canvas
