这是以前自己练习写的一个画布时钟

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>
　　　　<style>
　　　　　　canvas{
　　　　　　margin: 20px 400px 0;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<canvas width="500px" height="500px"></canvas>

　　　　<script>
　　　　　　var can=document.getElementsByTagName("canvas")[0];
　　　　　　var x=can.getContext("2d");

　　　　　　function clock(){

　　　　　　　　//每次执行代码清楚一次画布
　　　　　　　　x.clearRect(0,0,500,500);

　　　　　　　　//画一个蓝色实心圆
　　　　　　　　x.beginPath();
　　　　　　　　x.fillStyle="blue";
　　　　　　　　x.arc(250,250,250,Math.PI*0/180,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();

　　　　　　　　//再来一个白色填充圆，半径小于上边的蓝色填充圆，这样就会出现一个蓝色的圆环
　　　　　　　　x.beginPath();
　　　　　　　　x.fillStyle="#ffffff";
　　　　　　　　x.arc(250,250,230,Math.PI*0/180,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();

　　　　　　　　//分钟刻度，通过循环画出60根分钟刻度，360/6 得出每个得间隔
　　　　　　　　for(var i=0;i<60;i++){
　　　　　　　　　　x.save(); //保存环境变量
　　　　　　　　　　x.beginPath();
　　　　　　　　　　x.lineWidth=2;
　　　　　　　　　　x.translate(250,250);
　　　　　　　　　　x.rotate(i*6*Math.PI/180); //每个刻度间隔是6° ，所以i*6 在进行旋转就画出了所有刻度
　　　　　　　　　　x.moveTo(0,220);
　　　　　　　　　　x.lineTo(0,230);
　　　　　　　　　　x.stroke();
　　　　　　　　　　x.closePath();
　　　　　　　　　　x.restore();  //返回环境变量
　　　　　　　　}

　　　　　　　　//时钟刻度，时钟刻度只有12个所以，360/12 每个之间的间隔是30°，原理和分钟刻度相同当然你还可以循环更多，比如刻度换为数字
　　　　　　　　for(var a=0;a<12;a++){
　　　　　　　　　　x.save();
　　　　　　　　　　x.beginPath();
　　　　　　　　　　x.lineWidth=4;
　　　　　　　　　　x.translate(250,250);
　　　　　　　　　　x.rotate(a*30*Math.PI/180);
　　　　　　　　　　x.moveTo(0,215);
　　　　　　　　　　x.lineTo(0,230);
　　　　　　　　　　x.stroke();
　　　　　　　　　　x.closePath();
　　　　　　　　　　x.restore();
　　　　　　　　}

　　　　　　　　//获取当前的本地时间，并分别获取，时，分，秒，时和分都要精确到小数点后

　　　　　　　　var time=new Date();
　　　　　　　　var seconds=time.getSeconds();
　　　　　　　　var minutes=time.getMinutes()+seconds/60;
　　　　　　　　var hours=time.getHours()+minutes/60;

　　　　　　　　//当大于12的时候也就是要进入13点了 也就是1点  所以要减去12
　　　　　　　　if(hours>12){
　　　　　　　　　　hours=hours-12
　　　　　　　　};

　　　　　　　　//表盘上显示本地时间，如2017/06/14 下午 20：23

　　　　　　　　x.beginPath()
　　　　　　　　x.font="20px 黑体"
　　　　　　　　x.strokeText(time.toLocaleString(),150,200)
　　　　　　　　x.closePath();

　　　　　　　　//时
　　　　　　　　x.save();
　　　　　　　　x.translate(250,250)
　　　　　　　　x.lineWidth=4;
　　　　　　　　x.beginPath();
　　　　　　　　x.rotate(hours*30*Math.PI/180);//画好时针后当前的小时*30就是应该旋转的°数。
　　　　　　　　x.moveTo(0,10);
　　　　　　　　x.lineTo(0,-180);
　　　　　　　　x.stroke();
　　　　　　　　x.closePath();
　　　　　　　　x.restore();

　　　　　　　　//分
　　　　　　　　x.save();
　　　　　　　　x.beginPath();
　　　　　　　　x.translate(250,250)
　　　　　　　　x.lineWidth=3;
　　　　　　　　x.rotate(minutes*6*Math.PI/180); //分针同理
　　　　　　　　x.moveTo(0,10);
　　　　　　　　x.lineTo(0,-200)
　　　　　　　　x.stroke();
　　　　　　　　x.closePath();
　　　　　　　　x.restore();

　　　　　　　　//秒
　　　　　　　　x.save();
　　　　　　　　x.beginPath();
　　　　　　　　x.translate(250,250);
　　　　　　　　x.lineWidth=2;
　　　　　　　　x.rotate(seconds*6*Math.PI/180);//秒针也一样
　　　　　　　　x.moveTo(0,10);
　　　　　　　　x.lineTo(0,-210);
　　　　　　　　x.stroke();
　　　　　　　　x.closePath();
　　　　　　　　x.restore();

　　　　　　　　//秒针上的小圆点

　　　　　　　　x.save();
　　　　　　　　x.beginPath();
　　　　　　　　x.translate(250,250);
　　　　　　　　x.rotate(seconds*6*Math.PI/180);//让秒针小圆点随秒针位置，其实和秒针相同
　　　　　　　　x.fillStyle="blue";
　　　　　　　　x.arc(0,-170,4,0,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();
　　　　　　　　x.restore();

//中心蓝色小圆点

　　　　　　　　x.beginPath();
　　　　　　　　x.fillStyle="blue"
　　　　　　　　x.arc(250,250,6,0,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();

　　　　　　　　//中心红色小圆点

　　　　　　　　x.beginPath();
　　　　　　　　x.fillStyle="red"
　　　　　　　　x.arc(250,250,3,0,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();

　　　　　　}
　　　　　　setInterval(clock,1000); //隔一秒运行一下这方法，先会清空掉画布然后重新画这样每秒时间都在动了。
　　</script>
</body>
</html>

效果

　

canvas-菜鸟版画布时钟的更多相关文章

  1. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  2. html5 canvas简易版捕鱼达人游戏源码

    插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...

  3. Canvas组件：画布，可以实现动画操作。

    Module  10 Canvas组件:画布,可以实现动画操作. TextArea:文本域. 在单行文本域中回车会激发ActionEvent. 用CheckBoxGroup实现单选框功能. Java中 ...

  4. Canvas组件：画布，可以实现动画操作

    Canvas组件:画布,可以实现动画操作. TextArea:文本域. 在单行文本域中回车会激发ActionEvent. 用CheckBoxGroup实现单选框功能. Java中,单选框和复选框都是使 ...

  5. USBasp制作资料及全过程（菜鸟版）

    源:USBasp制作资料及全过程(菜鸟版) 一.usbasp 的一般性介绍: 1.下载线,是“ISP”(In System Programmability:“在系统编程”)或“IAP”(In Appl ...

  6. 通过Canvas + JS 实现简易时钟实战

    最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...

  7. 公告栏添加时钟——利用canvas画出一个时钟

    前言 最近在学习HTML5标签,学到Canvas,觉得很有趣.便在慕课网找了个demo练手.就是Canvas时钟. 对于canvas,w3shcool上是这么描述的: HTML5 <canvas ...

  8. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

  9. Html 5 版 电子时钟

    效果图: html 5 canvas元素  Html 5的canvas元素可以用于在网页上绘制图形[即canvas的作用]. canvas画布使用JavaScript在网页上绘制图形 其拥有绘制各种路 ...

随机推荐

  1. Sublime的一些问题记录

    1.默认的中文字体显示异常(参考:关于最新版的Sublime Text 3中默认的中文字体样式显示异常的问题) 1. 选择Perferences(首选项)--> settings(设置) 2. ...

  2. ssh 操作

    1.登录 ssh 用户名@远程地址 2.拷贝:scp -r 本地文件夹 远程文件夹(user@ip:目录) 3.从ssh中临时退出: a. ~  (control+z) b.查看后台任务:jobs c ...

  3. leetcode-229.求众数(二)

     题目: 给定一个大小为 n 的数组,找出其中所有出现超过 ⌊ n/3 ⌋ 次的元素. 说明: 要求算法的时间复杂度为O(n),空间复杂度为O(1). 示例 1: 输入: [3,2,3] 输出: [3 ...

  4. 1、C++学习预备知识

    C++在C语言面向过程的编程的基础上增加了类代表的面向对象编程和模板支持的泛型编程. 过程性编程强调的是,算法的过程性,OOP(面向对象编程)强调的是数据,试图让语言来满足问题的要求.其理念是设计与问 ...

  5. Visual Studio 2019 秘钥

    Visual Studio 2019 EnterpriseBF8Y8-GN2QH-T84XB-QVY3B-RC4DF Visual Studio 2019 ProfessionalNYWVH-HT4X ...

  6. flask_restful

    from flask_restful import (Resource, reqparse) # 参数解析对象生成 parser = reqparse.RequestParser() parser.a ...

  7. Android 利用apache tomcat在自己的电脑上搭建服务器

    1.什么叫服务器 装了服务器端的软件的那台电脑被称为服务器.常见的服务器的软件有apache tomcat. 2.Tomcat 介绍 tomcat是一种轻量级的web容器服务器,使用tomcat可以实 ...

  8. P3704 [SDOI2017]数字表格 （莫比乌斯反演）

    [题目链接] https://www.luogu.org/problemnew/show/P3704 [题解] https://www.luogu.org/blog/cjyyb/solution-p3 ...

  9. CF914E Palindromes in a Tree（点分治）

    题面 洛谷 CF 题解 题意:给你一颗 n 个顶点的树(连通无环图).顶点从 1 到 n 编号,并且每个顶点对应一个在'a'到't'的字母. 树上的一条路径是回文是指至少有一个对应字母的排列为回文. ...

  10. php session_id() session_name()

    1.Session.use_cookies:默认值为"1",代表SessionID使用Cookie来传递,反之就是用Query_String来传递 2.Session.name:这 ...