利用canvas画布画出一个钟表
context是一个封装了很多绘图功能的对象。不支持低版本的IE。
<canvas width="500" height="500" id="clock" ></canvas>
思路是获取到时分秒渲染到页面
1 var now =new Date();
2 var second =now.getSeconds();
3 var minute =now.getMinutes();
4 var hour1 =now.getHours();
5 //将24小时进制转为12小时，且为浮点型
6 var hour=hour1+minute/60;
7 hour=hour>12 ?hour-12:hour;
8 //获取全部时间
9 var time=now.toLocaleString( );
创建画布路径
1 //开始新路径
2 cxt.beginPath();
3 cxt.lineWidth=8;
4 cxt.strokeStyle="blue";
5 //路径函数 x,y,r,角度范围,顺时针/逆时针
6 cxt.arc(250,250,200,0,360,false);
7 cxt.stroke();
8 cxt.closePath();
画布的时间刻度
1 //时刻度 2 for(var i=0;i<12;i++){ 3 //保存当前状态 4 cxt.save(); 5 //刻度粗细 6 cxt.lineWidth=5; 7 //刻度颜色 8 cxt.strokeStyle="black" 9 //设置00点,以画布中心为00 10 cxt.translate(250,250); 11 //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180 12 cxt.rotate(i*30*Math.PI/180); 13 cxt.beginPath(); 14 //刻度起始点 15 cxt.moveTo(0,-180); 16 //刻度结束点 17 cxt.lineTo(0,-195); 18 cxt.closePath(); 19 cxt.stroke(); 20 //将旋转后的图片返回原画布 21 cxt.restore(); 22 } 23 24 //分刻度 25 for(var i=0;i<60;i++){ 26 //保存当前状态 27 cxt.save(); 28 //刻度粗细 29 cxt.lineWidth=3; 30 //刻度颜色 31 cxt.strokeStyle="black" 32 //设置00点,以画布中心为00 33 cxt.translate(250,250); 34 //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180 35 cxt.rotate(i*6*Math.PI/180); 36 cxt.beginPath(); 37 //起始点 38 cxt.moveTo(0,-188); 39 cxt.lineTo(0,-195); 40 cxt.closePath(); 41 cxt.stroke(); 42 //将旋转后的图片返回原画布 43 cxt.restore(); 44 } 45 //表盘中心 46 cxt.beginPath(); 47 cxt.lineWidth=1; 48 cxt.strokeStyle="red"; 49 cxt.fillStyle="red"; 50 //路径函数 x,y,r,角度范围,顺时针/逆时针 51 cxt.arc(250,250,4,0,360,false); 52 cxt.fill(); 53 cxt.stroke(); 54 cxt.closePath(); 55 //时针 56 //保存当前状态 57 cxt.save(); 58 cxt.lineWidth=5; 59 cxt.strokeStyle="black"; 60 //设置异次元空间00点 61 cxt.translate(250,250); 62 //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180 63 cxt.rotate(hour*30*Math.PI/180); 64 cxt.beginPath(); 65 cxt.moveTo(0,-120); 66 cxt.lineTo(0,10); 67 cxt.closePath(); 68 cxt.stroke(); 69 cxt.restore(); 70 //分针 71 cxt.save(); 72 cxt.lineWidth="3"; 73 cxt.strokeStyle="black"; 74 cxt.translate(250,250); 75 cxt.rotate(minute*6*Math.PI/180); 76 cxt.beginPath(); 77 cxt.moveTo(0,-150); 78 cxt.lineTo(0,15); 79 cxt.closePath(); 80 cxt.stroke(); 81 cxt.restore(); 82 //秒针 83 cxt.save(); 84 cxt.lineWidth="1.5"; 85 cxt.strokeStyle="red"; 86 cxt.translate(250,250); 87 cxt.rotate(second*6*Math.PI/180); 88 cxt.beginPath(); 89 cxt.moveTo(0,-160); 90 cxt.lineTo(0,20); 91 cxt.closePath(); 92 cxt.stroke(); 93 //秒针前端小点 94 cxt.beginPath(); 95 //外环为红色 96 cxt.strokeStyle="red"; 97 //灰色填充 98 cxt.fillStyle="gray"; 99 cxt.arc(0,-145,4,0,360,false); 100 cxt.fill(); 101 cxt.closePath(); 102 cxt.stroke(); 103 cxt.restore(); 104 //表盘中心 105 cxt.beginPath(); 106 cxt.lineWidth=1; 107 //外环为红色 108 cxt.strokeStyle="red"; 109 //灰色填充 110 cxt.fillStyle="gray"; 111 //路径函数 x,y,r,角度范围,顺时针/逆时针 112 cxt.arc(250,250,4,0,360,false); 113 cxt.fill(); 114 cxt.stroke(); 115 cxt.closePath(); 116 //写时间 117 cxt.font="15px 黑体 "; 118 cxt.fillStyle="black"; 119 //实心字 120 cxt.fillText(time,160,150);
因为每次都会更新新的时间，需要清除画布
cxt.clearRect(0,0,500,500);
创建一个函数 定时器让画布每秒动一次
setInterval(drawClock,1000);
