phpstudy集成环境

 首页 > 用<canvas>做时钟的问题

用<canvas>做时钟的问题

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas实例1-时钟</title>
</head>

<body>
<canvas id="clock" width="500" height="500">

 您的浏览器不支持canvas标签

</canvas>

<script>
var clock = document.getElementById('clock');
var cxt = clock.getContext('2d');

// 表盘（蓝色）

cxt.beginPath();
cxt.lineWidth = 10;
cxt.strokeStyle= "blue";
cxt.arc(250,250,200,0,360,false);
cxt.stroke();
cxt.closePath();
// 刻度

// 时刻度开始
for(var i=0; i<12; i++) {
    cxt.save();
    cxt.lineWidth = 7;
    cxt.strokeStyle = "#000";
    cxt.translate(250,250);
    cxt.rotate(i*30*Math.PI/180);
    cxt.beginPath();
    cxt.moveTo(0,-170);
    cxt.lineTo(0,-190);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
}
// 时刻度结束

// 分刻度开始
for(var i=0; i<60; i++) {
    cxt.save();
    cxt.lineWidth = 5;
    cxt.strokeStyle = "#000";
    cxt.translate(250,250);
    cxt.rotate(i*6*Math.PI/180);
    cxt.beginPath();
    cxt.moveTo(0,-180);
    cxt.lineTo(0,-190);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
}
// 分刻度结束

// 时针开始

cxt.save();
cxt.beginPath();
cxt.lineWidth = 7;
cxt.strokeStyle = "#000";
cxt.translate(250,250);
cxt.rotate(90*Math.PI/180);
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.stroke();
cxt.closePath();
cxt.restor();

// 时针结束

// 分针开始

cxt.save();
cxt.beginPath();
cxt.lineWidth = 5;
cxt.strokeStyle = "#000";
cxt.translate(250,250);
cxt.rotate(180*Math.PI/180);
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.stroke();
cxt.closePath();
cxt.restor();

// 分针结束

</script>
</body>
</html>
请各位老师帮忙看看，分针是复制时针的代码后进行了修改，为什么分针做不出来，请老师指教！非常感谢！

谢谢老师的指点！非常感谢！

cxt.restor();

==》

cxt.restore();
【热门文章】
【热门文章】