您的位置：首页 > Web前端 > HTML5

用html5的canvas画一个可以动的时钟

2014-12-23 21:41 555 查看

</pre><pre>

<!DOCTYPE html>
<html>
<head>
<title>时钟</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" height="500" width="500" style="margin-left: 350px">您的浏览器不支持html5的canvas元素</canvas>
<audio preload controls="controls">
<source src="mp3/2.ogg">
<source src="mp3/1.mp3">
</audio>
</body>
<script>
function show(){
var time=new Date();
var miao=time.getSeconds();
var fen=time.getMinutes()+miao/60;
var shi=time.getHours()+fen/60;
var context=document.getElementById('myCanvas').getContext('2d');
context.clearRect(0,0,500,500);
context.beginPath();
context.arc(250,250,250,0,2*Math.PI);
context.closePath();
context.stroke();
for(var i=0;i<12;i++){
context.save();
context.translate(250,250);
context.beginPath();
context.rotate(i*30*Math.PI/180);
context.lineWidth=10;
context.moveTo(0,-250);
context.lineTo(0,-230);
context.stroke();
context.restore();
}
for(var j=0;j<60;j++){
context.save();
context.translate(250,250);
context.beginPath();
context.rotate(j*6*Math.PI/180);
context.lineWidth=5;
context.moveTo(0,-250);
context.lineTo(0,-240);
context.stroke();
context.restore();
}
//时针
context.save();
context.translate(250,250);
context.beginPath();
context.lineWidth=10;
context.strokeStyle='black';
context.rotate(shi*30*Math.PI/180);
context.moveTo(0,20);
context.lineTo(0,-160);
context.closePath();
context.stroke();
context.restore();

context.save();
context.translate(250,250);
context.beginPath();
context.lineWidth=8;
context.strokeStyle='black';
context.lineCap='round';
context.rotate(fen*6*Math.PI/180);
context.moveTo(0,20);
context.lineTo(0,-180);
context.closePath();
context.stroke();
context.restore();

context.save();
context.translate(250,250);
context.beginPath();
context.lineWidth=6;
context.strokeStyle='red';
context.lineCap='round';
context.rotate(miao*6*Math.PI/180);
context.moveTo(0,20);
context.lineTo(0,-200);
context.closePath();
context.stroke();
context.restore();
}
window.setInterval(show,1000) ;
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航