<!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. 吴裕雄--天生自然ORACLE数据库学习笔记：用户管理与权限分配

    create user mr identified by mrsoft default tablespace users temporary tablespace temp; create user ...

  2. Windows驱动开发-DPC定时器

    DCP是一种使用更加灵活的定时器,可以对任意间隔时间进行定时.DPC定时器的内部使用了一个定时器对象KTIMER,当你设定了定时器之后,从设定开始起经过这个时间之后操作系统会将一个DPC定时器的例程插 ...

  3. 认识gets&read（buffer over flow is bof）

    gets不会检查输入的长度,从而有数据覆盖的风险,

  4. CentOS 7 启动流程

    1.UEFI或BIOS初始化,运行POST开机自检 2.选择启动设备,Boot Sequence 系统启动次序一般含有:光驱.U盘.硬盘A.硬盘B.按次序查找各引导设备,第一个有引导程序的设备即为本次 ...

  5. 莫烦 - Pytorch学习笔记 [ 二 ] CNN ( 1 )

    CNN原理和结构 观点提出 关于照片的三种观点引出了CNN的作用. 局部性:某一特征只出现在一张image的局部位置中. 相同性: 同一特征重复出现.例如鸟的羽毛. 不变性:subsampling下图 ...

  6. C# String 字符串一些关键理解

    #1 :在.Net Framework中,字符总是表示成16位Unicode的代码#2 :String 和string 其实是一样的只是表现形式上不同#3 :string类型被视为基元类型,也就是编译 ...

  7. QQ企业通---登录模块设计--知识点

    Rectangle 成员  存储一组整数,共四个,表示一个矩形的位置和大小.对于更高级的区域函数,请使用 Region 对象. Form与Control的区别? 窗体也是控件,继承Control类.可 ...

  8. phpQuery的使用

    前言 为什么使用phpQuery phpQuery是基于php5新添加的DOMDocument.而DOMDocument则是专门用来处理html/xml.它提供了强大的xpath选择器及其他很多htm ...

  9. 【转帖】IBM发布全新闪存解决方案，助企业存储架构做减法

    IBM发布全新闪存解决方案,助企业存储架构做减法 http://stor-age.zhiding.cn/stor-age/2020/0227/3124851.shtml 感觉 配图弄错了 FlashS ...

  10. CSS 常用操作

    1.对齐 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...