為什么我做的多了一條線？不知到怎么清除，求大神幫忙！
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>canvas繪制時鐘</title>
</head>
<body>
? ?<canvas id="demo">
? ? ? ?你的瀏覽器不支持canvas，請更換瀏覽器!
? ?</canvas>
? ?<script>
? ? ? ? ? ?(function () {
? ? ? ? ? ? ? ?var canvas=document.getElementById("demo");
? ? ? ? ? ? ? ?var ctx=canvas.getContext("2d");
? ? ? ? ? ? ? ?canvas.height=600;
? ? ? ? ? ? ? ?canvas.width=600;
? ? ? ? ? ? ? ?var w=canvas.width;
? ? ? ? ? ? ? ?var h=canvas.height;
? ? ? ? ? ? ? ?var r=w/2;
? ? ? ? ? ?function drawBackgroud() {
? ? ? ? ? ? ? ?ctx.save();
? ? ? ? ? ? ? ?ctx.translate(r,r);
? ? ? ? ? ? ? ?ctx.lineWidth=15;
? ? ? ? ? ? ? ?ctx.arc(0,0,r-15,0,2*Math.PI);
? ? ? ? ? ? ? ?ctx.stroke();
? ? ? ? ? ? ? ?var hoursNumber=[3,4,5,6,7,8,9,10,11,12,1,2];
? ? ? ? ? ? ? ?for (var i=0;i<hoursNumber.length;i++)
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ?ctx.font="35px Arial";
? ? ? ? ? ? ? ? ? ?ctx.textAlign="center";
? ? ? ? ? ? ? ? ? ?ctx.textBaseline="middle";
? ? ? ? ? ? ? ? ? ?var rad=2*Math.PI/12*i;
? ? ? ? ? ? ? ? ? ?var x=(r-60)*Math.cos(rad);
? ? ? ? ? ? ? ? ? ?var y=(r-60)*Math.sin(rad);
? ? ? ? ? ? ? ? ? ?ctx.fillText(hoursNumber[i],x,y);
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?for (var i=0;i<60;i++)
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ?var rad=2*Math.PI/60*i;
? ? ? ? ? ? ? ? ? ?var x=(r-35)*Math.cos(rad);
? ? ? ? ? ? ? ? ? ?var y=(r-35)*Math.sin(rad);
? ? ? ? ? ? ? ? ? ?ctx.beginPath();
? ? ? ? ? ? ? ? ? ?if (i%5===0)
? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ?ctx.fillStyle="#000";
? ? ? ? ? ? ? ? ? ? ? ?ctx.arc(x,y,5,0,2*Math.PI);
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?else
{
? ? ? ? ? ? ? ? ? ? ? ?ctx.fillStyle="#ccc";
? ? ? ? ? ? ? ? ? ? ? ?ctx.arc(x,y,5,0,2*Math.PI);
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?ctx.fill();
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ? ? ?//繪制時針、分針、秒針
function drawDot() {
? ? ? ? ? ? ? ? ? ?ctx.beginPath();
? ? ? ? ? ? ? ? ? ?ctx.fillStyle="#fff";
? ? ? ? ? ? ? ? ? ?ctx.arc(0,0,5,0,2*Math.PI);
? ? ? ? ? ? ? ? ? ?ctx.fill();
? ? ? ? ? ? ? ?}
? ? ? ? ? ?function drawHour(hour,minute) {
? ? ? ? ? ? ? ?ctx.save();
? ? ? ? ? ? ? ?ctx.beginPath();
? ? ? ? ? ? ? ?var rad=2*Math.PI/12*hour+2*Math.PI/12/60*minute;
? ? ? ? ? ? ? ?ctx.rotate(rad);
? ? ? ? ? ? ? ?ctx.lineWidth=10;
? ? ? ? ? ? ? ?ctx.lineCap="round";
? ? ? ? ? ? ? ?ctx.moveTo(0,20);
? ? ? ? ? ? ? ?ctx.lineTo(0,-r/2);
? ? ? ? ? ? ? ?ctx.stroke();
? ? ? ? ? ? ? ?ctx.restore();
? ? ? ? ? ?}
? ? ? ? ? ? ? ?function drawMinute(minute) {
? ? ? ? ? ? ? ? ? ?ctx.save();
? ? ? ? ? ? ? ? ? ?ctx.beginPath();
? ? ? ? ? ? ? ? ? ?var rad=2*Math.PI/60*minute;
? ? ? ? ? ? ? ? ? ?ctx.rotate(rad);
? ? ? ? ? ? ? ? ? ?ctx.lineWidth=5;
? ? ? ? ? ? ? ? ? ?ctx.lineCap="round";
? ? ? ? ? ? ? ? ? ?ctx.moveTo(0,20);
? ? ? ? ? ? ? ? ? ?ctx.lineTo(0,-r+60);
? ? ? ? ? ? ? ? ? ?ctx.stroke();
? ? ? ? ? ? ? ? ? ?ctx.restore();
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?function drawSecond(second) {
? ? ? ? ? ? ? ? ? ?ctx.save();
? ? ? ? ? ? ? ? ? ?ctx.beginPath();
? ? ? ? ? ? ? ? ? ?ctx.fillStyle="red";
? ? ? ? ? ? ? ? ? ?var rad=2*Math.PI/60*second;
? ? ? ? ? ? ? ? ? ?ctx.rotate(rad);
? ? ? ? ? ? ? ? ? ?ctx.moveTo(2,20);
? ? ? ? ? ? ? ? ? ?ctx.lineTo(-2,20);
? ? ? ? ? ? ? ? ? ?ctx.lineTo(-1,-r+40);
? ? ? ? ? ? ? ? ? ?ctx.lineTo(1,-r+40);
? ? ? ? ? ? ? ? ? ?ctx.fill();
? ? ? ? ? ? ? ? ? ?ctx.restore();
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?function draw() {
? ? ? ? ? ? ? ? ? ?ctx.clearRect(0,0,w,h);
? ? ? ? ? ? ? ? ? ?var now=new Date();
? ? ? ? ? ? ? ? ? ?var hour=now.getHours();
? ? ? ? ? ? ? ? ? ?var minute=now.getMinutes();
? ? ? ? ? ? ? ? ? ?var second=now.getSeconds();
? ? ? ? ? ? ? ? ? ?drawBackgroud();
? ? ? ? ? ? ? ? ? ?drawHour(hour,minute);
? ? ? ? ? ? ? ? ? ?drawMinute(minute);
? ? ? ? ? ? ? ? ? ?drawSecond(second);
? ? ? ? ? ? ? ? ? ?drawDot();
? ? ? ? ? ? ? ? ? ?ctx.restore();
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?draw();
? ? ? ? ? ?setInterval(draw,1000);
? ? ? ?})();
? ?</script>
</body>
</html>
