canvas绘制时钟
2017-07-25 本文已影响0人
congcongnanian
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>canvas绘制时钟</title>
</head>
<body>
<canvas id='canvas' style="margin:0 auto;display:block;width:200px;height:200px;margin-top:30px;"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d'); //创建context对象
canvas.width = '200';
canvas.height = '200';
var width = canvas.width;
var height =canvas.height;
var r = width / 2;
function drawBackground(){
context.save();
context.translate(r,r);
context.beginPath();
context.lineWidth = 10;
context.arc(0, 0, r - 5,0,2*Math.PI ,false);
context.stroke(); //圆形已画完
var numbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
context.font = '18px Arial';
context.textAlign = 'center';
context.textBaseline = 'middle';
numbers.forEach(function(num,i){
var rad=2*Math.PI/12* i;
var x=Math.cos(rad) * (r-30);
var y=Math.sin(rad) * (r-30);
context.fillText(num , x , y );
}); //计算每个数字之间的角度x,y，用forEach()循环输出数字,至此数字画完。
for(var i=0;i<60;i++){
var rad = 2*Math.PI / 60 * i; //一个点之间的弧度为2*Math.PI / 60
var x = Math.cos(rad) *(r-15);
var y = Math.sin(rad)*(r-15);
context.beginPath();
//用if..else..来判断然后分别画上不同的颜色
if(i % 5 == 0){
context.fillStyle = "#000";
context.arc(x,y,2,0,2*Math.PI,false);
}else{
context.fillStyle = '#ccc';
context.arc(x,y,2,0,2*Math.PI,false);
}
context.fill();
}
} //至此分钟上的60个点画完了
//该函数用于绘制时针，注意在绘制前要先调用save()方法保存当前状态，绘制完成后调用restore()函数返回到之前的路径状态
function drawHour(hour,minute){
context.save();
context.beginPath();
var rad = 2 * Math.PI /12 * hour;
var mrad = 2 *Math.PI / 12 / 60 *minute;
context.rotate(rad+mrad);
context.lineWidth = 6;
context.lineCap = 'round';
context.moveTo(0,10);
context.lineTo( 0,-r / 2 );
context.stroke();
context.restore();
}
//该函数用于绘制分针
function drawMinute(minute){
context.save(); //注意绘制分针之前先保存当前的状态，因为之后会调用rotate()函数旋转画布而改变之前的画布状态
context.beginPath();
var rad = 2*Math.PI / 60 * minute;
context.rotate(rad);
context.lineWidth = 3;
context.lineCap = 'round';
context.moveTo (0,10);
context.lineTo(0,-r+25);
context.stroke();
context.restore(); //返回之前保存的路径状态
}
//该函数用于绘制秒针
function drawSecond(second){
context.save();
context.beginPath();
var rad = 2*Math.PI / 60 * second;
context.rotate(rad);
context.fillStyle = '#f12';
context.lineWidth = 2;
context.moveTo(-2,20);
context.lineTo(2,20);
context.lineTo(0,-r + 12);
context.lineTo(0,-r + 12);
context.fill();
context.restore();
}
//绘制时针分针秒针上面的一个点，覆盖它们
function drawdot(){
context.beginPath();
context.fillStyle = '#fff';
context.arc(0,0,3,0,2*Math.PI,false);
context.fill();
}
function time_move(){
context.clearRect(0,0,width,height); //清除画布，从(0,0)点开始到(width,height)清除
var now = new Date(); //创建Date()函数
var hour = now.getHours(); //用getHours()方法获取当前的小时
var minute = now.getMinutes(); //用getMinutes()方法获取当前的分钟
var second = now.getSeconds(); //用getSecongs()方法获取当前的秒数
drawBackground();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawdot();
context.restore();
}
time_move();
setInterval(time_move,1000);
</script>
</html>
