<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#mycanvas{
border:1px solid #000;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
<script type="text/javascript">
var mycanvas = document.getElementById('mycanvas');
var context = mycanvas.getContext('2d');
context.translate(250,250);
// 存储坐标系状态
context.save();
// 创建绘制表盘函数
function biaopan(){
// 绘制表盘
context.beginPath();
context.arc(0,0,250,0,Math.PI*2,true);
context.closePath();
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.arc(0,0,230,0,Math.PI*2,true);
context.closePath();
context.fillStyle = 'burlywood';
context.fill();
// 通过循环绘制刻度
for(var i=0; i<60; i++){
context.beginPath();
if(i % 5 == 0){
context.fillStyle = '#000';
context.fillRect(-4,-230,8,20);
}else{
context.fillStyle = 'gray';
context.fillRect(-2,-230,4,10);
}
context.closePath();
context.rotate(Math.PI*2/60);
}
}
// 创建方法绘制表针
function point(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
// 绘制时针
// 恢复坐标系状态
context.restore();
context.save();
context.rotate(Math.PI + Math.PI*2/12*h + Math.PI*2/12*m/60);
context.beginPath();
context.lineCap = 'round';
context.moveTo(0,0);
context.lineTo(0,130);
context.closePath();
context.lineWidth = 8;
context.strokeStyle = 'blue';
context.stroke();
// 绘制分针
// 恢复坐标系状态
context.restore();
context.save();
context.rotate(Math.PI + Math.PI*2/60*m + Math.PI*2/60*s/60);
context.beginPath();
context.moveTo(0,0);
context.lineTo(0,170);
context.closePath();
context.lineWidth = 5;
context.lineCap = 'round';
context.strokeStyle = 'green';
context.stroke();
// 绘制秒针
// 恢复坐标系状态
context.restore();
context.save();
context.rotate(Math.PI + Math.PI*2/60*s);
context.beginPath();
context.lineCap = 'round';
context.moveTo(0,0);
context.lineTo(0,220);
context.closePath();
context.lineWidth = 3;
context.strokeStyle = '#000';
context.stroke();
// 绘制圆心
context.restore();
context.save();
context.beginPath();
context.arc(0,0,10,0,Math.PI*2,true);
context.fillStyle = '#000';
context.fill();
context.close();
}
setInterval(function(){
context.clearRect(0,0,mycanvas.width,mycanvas.height);
biaopan();
point();
},1);
</script>
</body>
</html>
绘制钟表
最新推荐文章于 2021-02-06 15:01:23 发布