求助：用Canvas画时钟，为什么运行结果时钟不动呢？代码如下
html5吧
全部回复
仅看楼主
level 1
LindaRoy 楼主
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>使用canvas元素绘制指针式动画时钟</title>
</head>
<body>
<canvas id="clock" width="500" height="500">
您的浏览器不支持canvas标签，无法看到时钟
</canvas>
<script>
var clock=document.getElementById('clock');
var cxt=clock.getContext('2d');
function drawClock(){
//清除画布
cxt.clearRect(0,0,500,500);
var now=new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
//小时必须获取浮点类型（小时+分数转化成的小时）
hour=hour+min/60;
//将24小时进制转换为12小时
hour=hour>12?hour-12:hour;
//表盘（蓝色）
cxt.lineWidth=10;
cxt.strokeStyle="blue";
cxt.beginPath();
cxt.arc(250,250,200,0,Math.PI*2,false);
cxt.closePath();
cxt.stroke();
//刻度
//时刻度
for(var i=0; i<12; i++){
cxt.save();
//设置时针的粗细和颜色
cxt.lineWidth=7;
cxt.strokeStyle="#000";
cxt.translate(250,250);
//设置旋转角度:先设置（0,0）点，在设置旋转角度
cxt.rotate(i*30*Math.PI/180); //弧度=角度*Math.PI/180
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//分刻度
for(var i=0; i<60; i++){
cxt.save();
//设置分刻度的粗细,颜色使用时刻度的颜色黑色
cxt.lineWidth=5;
cxt.strokeStyle="#000";
//设置或者重置画布的（0,0）点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(i*6*Math.PI/180);
//画分针刻度
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//秒针
cxt.save();
//设置秒针的风格
//颜色红色
cxt.strokeStyle="red";
//粗细3像素
cxt.lineWidth=3;
//重置（0,0）点
cxt.translate(250,250);
//设置旋转角度 1秒钟旋转6度
cxt.rotate(sec*6*Math.PI/180);
//画图
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//画出时针、分针、秒针的交叉点
cxt.beginPath();
cxt.arc(0,0,5,0,Math.PI*2,false);
cxt.closePath();
//设置填充样式
cxt.fillStyle="grey";
cxt.fill();
//设置笔触样式（秒针已设置）
cxt.stroke();
//设置秒针前端的小圆点
cxt.beginPath();
cxt.arc(0,-150,5,0,Math.PI*2,false);
cxt.closePath();
//设置填充样式
cxt.fillStyle="grey";
cxt.fill();
//设置笔触样式（秒针已设置）
cxt.stroke();
cxt.restore();
//分针
cxt.save();
//设置分针的风格
cxt.lineWidth=5;
cxt.strokeStyle="#000";
//设置异次元空间分针画布的（0,0）点
cxt.translate(250,250);
//设置旋转角度 1分钟旋转6度
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//时针
cxt.save();
//设置时针风格
cxt.lineWidth=7;
//设置时针的颜色黑色
cxt.strokeStyle="#000";
//设置异次元空间的（0,0）点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restroe();
}
//使用setInterval(代码，毫秒时间) 让时间动起来
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>
2014年05月23日 04点05分 1
level 2
任浩天135
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>使用canvas元素绘制指针式动画时钟</title>
</head>
<body>
<canvas id="clock" width="500" height="500">
您的浏览器不支持canvas标签，无法看到时钟
</canvas>
<script>
var clock=document.getElementById('clock');
var cxt=clock.getContext('2d');
function drawClock(){
//清除画布
cxt.clearRect(0,0,500,500);
var now=new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
//小时必须获取浮点类型（小时+分数转化成的小时）
hour=hour+min/60;
//将24小时进制转换为12小时
hour=hour>12?hour-12:hour;
//表盘（蓝色）
cxt.lineWidth=10;
cxt.strokeStyle="blue";
cxt.beginPath();
cxt.arc(250,250,200,0,Math.PI*2,false);
cxt.closePath();
cxt.stroke();
//刻度
//时刻度
for(var i=0; i<12; i++){
cxt.save();
//设置时针的粗细和颜色
cxt.lineWidth=7;
cxt.strokeStyle="#000";
cxt.translate(250,250);
//设置旋转角度:先设置（0,0）点，在设置旋转角度
cxt.rotate(i*30*Math.PI/180); //弧度=角度*Math.PI/180
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//分刻度
for(var i=0; i<60; i++){
cxt.save();
//设置分刻度的粗细,颜色使用时刻度的颜色黑色
cxt.lineWidth=5;
cxt.strokeStyle="#000";
//设置或者重置画布的（0,0）点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(i*6*Math.PI/180);
//画分针刻度
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//秒针
cxt.save();
//设置秒针的风格
//颜色红色
cxt.strokeStyle="red";
//粗细3像素
cxt.lineWidth=3;
//重置（0,0）点
cxt.translate(250,250);
//设置旋转角度 1秒钟旋转6度
cxt.rotate(sec*6*Math.PI/180);
//画图
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//画出时针、分针、秒针的交叉点
cxt.beginPath();
cxt.arc(0,0,5,0,Math.PI*2,false);
cxt.closePath();
//设置填充样式
cxt.fillStyle="grey";
cxt.fill();
//设置笔触样式（秒针已设置）
cxt.stroke();
//设置秒针前端的小圆点
cxt.beginPath();
cxt.arc(0,-150,5,0,Math.PI*2,false);
cxt.closePath();
//设置填充样式
cxt.fillStyle="grey";
cxt.fill();
//设置笔触样式（秒针已设置）
cxt.stroke();
cxt.restore();
//分针
cxt.save();
//设置分针的风格
cxt.lineWidth=5;
cxt.strokeStyle="#000";
//设置异次元空间分针画布的（0,0）点
cxt.translate(250,250);
//设置旋转角度 1分钟旋转6度
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//时针
cxt.save();
//设置时针风格
cxt.lineWidth=7;
//设置时针的颜色黑色
cxt.strokeStyle="#000";
//设置异次元空间的（0,0）点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore(); //这写错了吧
}
//使用setInterval(代码，毫秒时间) 让时间动起来
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>
2014年05月23日 09点05分 2
LindaRoy
怎么错了？你能帮我改改吗？ [乖]
2014年05月24日 06点05分
LindaRoy
a,,,,原来是单词拼写错了。。⊙﹏⊙b汗
2014年05月24日 07点05分
level 1
贴吧用户_7UUGaa8
新手小白，终于变出时钟来了[笑尿]
2022年03月28日 06点03分 3
1