<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>canvas绘制表盘</title>
</head>
<body>
　　<canvas id='box' width="500" height="500" >
　　　　您的浏览器不支持canvas
　　</canvas>
　　<script>
　　　　var box = document.getElementById('box');
　　　　var cxt = box.getContext('2d');
　　　　// 时钟动起来
　　　　var timer = null;
　　　　function clock(){
　　　　　　var date = new Date();
　　　　　　var s = date.getSeconds();

　　　　　　var m = date.getMinutes()+s/60;

　　　　　　var h = date.getHours()+m/60;
　　　　　　h = h>12? h-12:h;
　　　　　　// 清画布
　　　　　　cxt.clearRect(0,0,500,500);
　　　　　　// 画表盘
　　　　　　cxt.strokeStyle = '#f0f';
　　　　　　cxt.lineWidth = 6;
　　　　　　cxt.beginPath();
　　　　　　cxt.arc(250,250,100,0,2*Math.PI);
　　　　　　cxt.stroke();
　　　　　　// 画时钟刻度
　　　　　　for(var i=0; i<12; i++){
　　　　　　　　cxt.save();
　　　　　　　　cxt.translate(250,250);
　　　　　　　　cxt.rotate(30*i*Math.PI/180);
　　　　　　　　cxt.lineWidth = 3;
　　　　　　　　cxt.beginPath();
　　　　　　　　cxt.moveTo(0,-80);
　　　　　　　　cxt.lineTo(0,-92);
　　　　　　　　cxt.stroke();
　　　　　　　　cxt.restore();
　　　　　　}
　　　　　　//画分钟刻度
　　　　　　for(var i=0; i<60; i++){
　　　　　　　　cxt.save();
　　　　　　　　cxt.translate(250,250);
　　　　　　　　cxt.rotate(6*i*Math.PI/180);
　　　　　　　　cxt.lineWidth = 2;
　　　　　　　　cxt.beginPath();
　　　　　　　　cxt.moveTo(0,-86);
　　　　　　　　cxt.lineTo(0,-92);
　　　　　　　　cxt.stroke();
　　　　　　　　cxt.restore();
　　　　　　}
　　　　　　// 画时针
　　　　　　cxt.save();
　　　　　　cxt.lineWidth = 5;
　　　　　　cxt.translate(250,250);
　　　　　　cxt.rotate(h*30*Math.PI/180);
　　　　　　cxt.beginPath();
　　　　　　cxt.moveTo(0,6);
　　　　　　cxt.lineTo(0,-40);
　　　　　　cxt.stroke();
　　　　　　cxt.restore();
　　　　　　// 画分针
　　　　　　cxt.save();
　　　　　　cxt.lineWidth = 3;
　　　　　　cxt.translate(250,250);
　　　　　　cxt.rotate(m*6*Math.PI/180);
　　　　　　cxt.beginPath();
　　　　　　cxt.moveTo(0,8);
　　　　　　cxt.lineTo(0,-60);
　　　　　　cxt.stroke();
　　　　　　cxt.restore();
　　　　　　// 画秒针
　　　　　　cxt.save();
　　　　　　cxt.lineWidth = 1;
　　　　　　cxt.translate(250,250);
　　　　　　cxt.rotate(s*6*Math.PI/180);
　　　　　　cxt.beginPath();
　　　　　　cxt.moveTo(0,10);
　　　　　　cxt.lineTo(0,-75);
　　　　　　cxt.stroke();
　　　　　　cxt.restore();
　　　　　　// 画中心的小圆固定三根针
　　　　　　cxt.save();
　　　　　　cxt.beginPath();
　　　　　　cxt.fillStyle = '#0f0';
　　　　　　cxt.lineWidth = 2;
　　　　　　cxt.translate(250,250);
　　　　　　cxt.arc(0,0,2,0,360,false);
　　　　　　cxt.stroke();
　　　　　　cxt.fill();
　　　　　　cxt.restore();
　　　　　　// 画秒针上的园
　　　　　　cxt.save();
　　　　　　cxt.fillStyle = '#f00';
　　　　　　cxt.lineWidth = 2;
　　　　　　cxt.translate(250,250);
　　　　　　cxt.rotate(s*6*Math.PI/180);
　　　　　　cxt.beginPath();
　　　　　　cxt.arc(0,-60,2,0,360,false);
　　　　　　cxt.stroke();
　　　　　　cxt.fill();
　　　　　　cxt.restore();
　　　　}
　　　　clock();
　　　　timer = setInterval(clock,1000);
　　</script>
</body>
</html>

canvas绘制表盘时钟的更多相关文章

  1. 用canvas绘制一个时钟

    实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...

  2. 使用canvas绘制一个时钟

    周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...

  3. canvas绘制简易时钟

    时钟绘制的非常简易,但该有的都有了. 效果图如下, <!DOCTYPE html> <html> <head lang="en"> <me ...

  4. 应用canvas绘制动态时钟--每秒自动动态更新时间

    使用canvas绘制时钟 下文是部分代码,完整代码参照:https://github.com/lemoncool/canvas-clock,可直接下载. 首先看一下效果图:每隔一秒会动态更新时间 一. ...

  5. html5、canvas绘制本地时钟

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. Python Turtle库绘制表盘时钟

    运行效果: 源代码: 1 # coding=utf-8 2 3 import turtle 4 from datetime import * 5 6 # 抬起画笔,向前运动一段距离放下 7 def S ...

  7. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  8. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  9. canvas绘制时钟及注释及save和restore的用法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. Unable to instantiate Action, xxxAction, defined for 'xxx' in namespace '/'xxxAction解决方案

    出现这个问题的原因主要有两个 1.如果项目没有使用Spring,则struts.xml配置文件中,这个action的class属性的路径没有写完整,应该是包名.类名 2.如果项目使用了Spring,那 ...

  2. MySQL之正则

    八:正则匹配: 语法: select * from 表名 where 字段名 regexp "正则表达式"; PS:MySQL中正则匹配,不能使用\w等字幕作为匹配

  3. 十一 Spring的AOP开发的相关术语

    SpringAOP简介: AOP思想最早是由AOP联盟组织提出的.Spring使用这种思想最好的框架. Spring的AOP有自己实现的方式,但是非常繁琐.AspectJ是一个AOP框架,Spring ...

  4. 十五 OGNL的入门

    一.访问对象的方法

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：偏移列

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Linux之用户和用户组总结

    Linux是多用户.多任务操作系统 UID即为用户身份号码,具有唯一性,可通过UID来判断用户身份,有以下几种:UID为0,系统管理员,即root,万能:UID为1-999,系统账号,用于独立执行某些 ...

  7. 02-09Android学习进度报告九

    今天我学习了关于Adapter的基础知识,了解了Android开发的一些思路和架构. 首先我了解了Adapter的概念以及开发过程中常用的Adapter: BaseAdapter:抽象类,实际开发中我 ...

  8. Spring Cloud常用注解

    @SpringBootApplication(exclude = {org.springframework.boot.autoconfigure.security.servlet.SecurityAu ...

  9. A way to find out how activity for mssql and oracle

    Dear buddy, Have you confuse that how activity about my databases, if we conside it by using backup ...

  10. pytorc人工神经网络Logistic regression与全连接层

    //2019.10.08神经网络与全连接层1.logistics regression逻辑回归的思想是将数据利用激活函数sigmoid函数转换为0-1的概率,然后定义一定的阈值0.5,大于阈值则为一类 ...