<!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. 4-form表单的双向绑定

    概念:表单中的input框等其他标签,值变化时会触发函数,改变state中的值,反过来修改state中的值也会改变input框中值的展现 实现:利用类组件里的state属性来实现(setState会再 ...

  2. 2 Struts2的执行流程&配置文件的加载顺序

    执行流程: 访问前段页面,通过url访问action 访问xml中Struts2核心过滤器,并执行一组拦截器(这组拦截器在struts-default.xml中,实现了部分功能) 通过action配置 ...

  3. Python学习第十七课——组合

    组合1 #组合 1 class Hand: pass class Foot: pass class Trunk: pass class Head: pass class Person: def __i ...

  4. Laravel 验证 教程

    英文源文章: https://www.techiediaries.com/laravel-authentication-tutorial/ 在上一篇教程中,我们已经接触过Laravel,同时介绍了最新 ...

  5. 【PAT甲级】1036 Boys vs Girls (25 分)

    题意: 输入一个正整数N(题干没指出范围,默认1e5可以AC),接下来输入N行数据,每行包括一名学生的姓名,性别,学号和分数.输出三行,分别为最高分女性学生的姓名和学号,最低分男性学生的姓名和学号,前 ...

  6. 112、Java中String类之字符串文本拆分为指定的个数

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  7. 【剑指Offer面试编程题】题目1369：字符串的排列--九度OJ

    题目描述: 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 输入: 每个 ...

  8. 【剑指Offer面试编程题】题目1511：从尾到头打印链表--九度OJ

    题目描述: 输入一个链表,从尾到头打印链表每个节点的值. 输入: 每个输入文件仅包含一组测试样例. 每一组测试案例包含多行,每行一个大于0的整数,代表一个链表的节点.第一行是链表第一个节点的值,依次类 ...

  9. 新见Java数据类型_需了解

    LinkedList<T>.LinkedList.poll() 先给出结论:pop 与 poll 都是取出 LinkedList 的第一个元素,并将该元素删除,等效于:removeFirs ...

  10. 项目启动异常,java.lang.IllegalStateException: BeanFactory not initialized or already closed - call 'refresh' before accessing beans via the ApplicationContext

    java.lang.IllegalStateException: BeanFactory not initialized or already closed - call 'refresh' befo ...