- <!DOCTYPE html>
- <htmllang="en">
- <head>
- <metacharset="UTF-8">
- <title>
- Canvas时钟实例
- </title>
- </head>
- <body>
- <!-- 创建一个Canvas画布 -->
- <canvasid="clock"width="1000"height="650"style="background: black">
- 你的浏览器不支持canvas标签!
- </canvas>
- <!-- 引入js -->
- <script>
- /*
- 1. 创建画布,获取上下文文档创建个2d对象
- 2. 分别写画指针,画刻度,画时钟的函数
- 3. 弄个定时器让时钟动起来
- */
- // 获取canvas上下文文档对象
- var clock = document.getElementById('clock');
- var cxt = clock.getContext('2d');
- // 画指针
- function drawPointer(width, color, value, angle, startx, starty, endx, endy){
- cxt.save();
- // 先保存当前画布
- cxt.lineWidth = width;
- // 设置画笔宽度
- cxt.strokeStyle = color;
- // 设置画笔颜色
- cxt.translate(550,310);
- // 设置画笔原点坐标
- cxt.rotate(value * angle *Math.PI /180);
- // 设置旋转的角度,参数是弧度
- cxt.beginPath();
- cxt.moveTo(startx, starty);
- cxt.lineTo(endx, endy);
- cxt.closePath();
- // 画路径
- cxt.stroke();
- // 开始画线
- cxt.restore();
- // 将旋转后的线返回给画布
- }
- // 画刻度
- function drawScale(size, width, color, value, startx, starty, endx, endy){
- for(var i =0; i < size; i++){
- drawPointer(width, color, value, i, startx, starty, endx, endy);
- }
- }
- // 指针动画填充颜色
- function drawFill(){
- cxt.save();
- cxt.beginPath();
- cxt.arc(550,310,7,0,360,false);
- cxt.closePath();
- cxt.fillStyle ="red";
- cxt.fill();
- cxt.restore();
- }
- // 画时钟
- function drawClock(){
- cxt.clearRect(0,0,1000,650);
- // 清空整个画布
- var now =newDate();
- // 获取系统时间,取时、分、秒
- var sec = now.getSeconds();
- var min = now.getMinutes();
- var hour = now.getHours();
- min += sec /60;
- hour += min /60;
- if(hour >12) hour -=12;
- cxt.beginPath();
- // 开始画表
- cxt.lineWidth =10;
- cxt.strokeStyle ="blue";
- cxt.arc(550,310,300,0,360,false);
- cxt.closePath();
- cxt.stroke();
- // 画刻度
- drawScale(12,7,"white",30,0,-285,0,-260);//画时刻度
- drawScale(60,5,"white",6,0,-285,0,-270);//画分刻度
- // 画针
- drawPointer(7,"purple", hour,30,0,12,0,-200);//画时针
- drawPointer(5,"yellow", min,6,0,15,0,-230);//画分针
- drawPointer(4,"red", sec,6,0,17,0,-240);//画秒针
- // 优化秒针,加箭头
- drawPointer(3,"red", sec,6,-4,-225,0,-240);
- drawPointer(3,"red", sec,6,4,-225,0,-240);
- drawFill();
- }
- drawClock();
- setInterval(drawClock,1000);
- // 设置一个间隔1秒的定时器
- </script>
- </body>
- </html>