<!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. 1004 Counting Leaves (30分) DFS

    1004 Counting Leaves (30分)   A family hierarchy is usually presented by a pedigree tree. Your job is ...

  2. 夯实Java基础（二十一）——Java反射机制

    1.反射机制概述 Java反射机制是指程序在运行状态中,对于任何一个类,我们都能够知道这个类的所有属性和方法(包括private.protected等).对于任何一个对象,我们都能够对它的属性和方法进 ...

  3. Windows对应的"Hello,world"程序

    <Windows程序设计>(第五版)(美Charles Petzold著) https://docs.microsoft.com/zh-cn/windows/desktop/apiinde ...

  4. JS 一次性事件问题

    项目的需求就是不能重复提交 是通过click点击事件提交数据,到这里的时候想了很多办法,比如说销毁这个点击事件, 但是这个实现起来是相对比较麻烦的,后面想到了一个相对比较简单的办法 通过推荐判断 JS ...

  5. windows网络编程-C语言实现简单的UDP协议聊天

    与TCP协议下编写服务端程序代码类似,但因为是无连接的形式,所以不需要监听. 这次,我用了一点不同的想法:我建立一个服务端,用了两个端口和两个套接字,把服务端作为一个数据转发的中转站,使得客户机之间进 ...

  6. Redis调用

    Redis帮助类 using StackExchange.Redis; using System; using System.Collections.Generic; using System.Lin ...

  7. UISearchBar设置背景色

    1.关于UISearchBar的背景颜色,竟然要如下设置才正常: [documentSearchView setBackgroundImage:[UIImage new]]; documentSear ...

  8. 「ZJOI2006」物流运输

    题目 [内存限制:$256MiB$][时间限制:$1000ms$] [标准输入输出][题目类型:传统][评测方式:文本比较] [题目描述] 物流公司要把一批货物从码头 A 运到码头 B.由于货物量比较 ...

  9. nginx 打印详细请求

    log_format main escape=json '{ "@timestamp": "$time_iso8601", ' '"remote_ad ...

  10. 吴裕雄--天生自然python机器学习实战：K-NN算法约会网站好友喜好预测以及手写数字预测分类实验

    实验设备与软件环境 硬件环境:内存ddr3 4G及以上的x86架构主机一部 系统环境:windows 软件环境:Anaconda2(64位),python3.5,jupyter 内核版本:window ...