<!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. git pull解决冲突

    git报错:Please commit your changes or stash them before you merge. 解决:1.不需要保留本地修改的话,直接将有冲突的文件还原再pull:g ...

  2. HDU1176免费馅饼（DP)

    都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人品实在是太好了,这馅饼别处都不掉,就掉落在他身旁的10米范围内.馅饼如果掉在了地上当然就 ...

  3. 使用eclipse部署springcloud config从GitHub上获取配置内容出现错误：Auth fail

    Eclipse点击Window > Preferences > General > Network Connections > SSH2 点击"Key Managem ...

  4. Solr与tomcat搭建(搭建好)

    https://pan.baidu.com/s/1kXagNYJ  密码:hgxd

  5. scrapy 开发流程

    一.Spider 开发流程 实现一个 Spider 子的过程就像是完成一系列的填空题,Scrapy 框架提出以下问题让用户在Spider 子类中作答: 1.爬虫从哪个或者那些页面开始爬取? 2.对于一 ...

  6. iframe切换

    iframe(locator有三种情况,可以是:定位表达式(driver.find_element_by_xpath()),frame的名称,下标index) driver.switch_to.fra ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：用于要弹出信息的按钮

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

  8. (二)Buildroot介绍

    详情请参考: http://www.buildroot.org/downloads/manual/manual.html 参考博客: https://www.cnblogs.com/arnoldlu/ ...

  9. The problem: somthing wrong when my computer excute the command "git clone XXXX"

    Error:git@github.com: Permission denied (publickey).fatal: Could not read from remote repository. Pl ...

  10. P1095 解码PAT准考证

    1095 解码PAT准考证 (25分)   PAT 准考证号由 4 部分组成: 第 1 位是级别,即 T 代表顶级:A 代表甲级:B 代表乙级: 第 2~4 位是考场编号,范围从 101 到 999: ...