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

<!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. c语言和c++的相互调用

    1.c与c++编译方式 (1)gcc和g++都可以编译.c文件,也都可以编译.cpp文件.g++和gcc是通过后缀名来辨别是c程序还是c++程序的(这一点与Linux辨别文件的方式不同,Linux是通 ...

  2. cmd命令窗口相关操作指南

    cmd命令窗口打开方式:win+R cmd 1.盘符切换 d: 回车 (d为磁盘名) 2.查看当前目录下的文件和文件夹 输入dir 3.进入指定目录(若需跨盘符操作,应先切换盘符) cd(空格)+绝对 ...

  3. Vue keep-alive 组件.

    如果不用 webpack , 那么 name 就是 vue.component(name) 这个 name 就是 export default { name:"index"} 的那 ...

  4. spring boot 自定义静态资源 位置..

    upload-path: E:/upload # 上传文件夹. upload-key: 72b3158c-a0f3-11e8-98d0-529269fb1459 # 定义上传的 key . sprin ...

  5. Windows10 下安装配置IIS + MySQL5.7.19 + nginx1.12.1 + php7.1.7

    环境: VMWare Workstation Player12 Windows10 Pro x64 一.安装系统 vmware 会采用 fast install 方式很快装完,无需配置什么. 二.配置 ...

  6. 【算法笔记】B1024 科学计数法

    1024 科学计数法 (20 分) 科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9]+E[+-][0-9]+,即数字的整数部分只有 1 位, ...

  7. ansys 14.0

    张建伟等．2012.12 人民邮电 一天一本书,这种感觉 真是爽啊． 但我觉得什么也没学到． 话说回来,此authors 确实书写得比较一般,实例不如百度文档上的WORD实例,理论不如我看的那本CFD ...

  8. PIE SDK正射校正

    1. 算法功能简介 正射校正是对影像空间和几何畸变进行校正生成多中心投影平面正射图像的处理过程.它除了能纠正一般系统因素产生的几何畸变外,还可以消除地形引起的几何畸变 PIE支持算法功能的执行,下面对 ...

  9. mysql 查询 TOP N 问题

    Q:有一个学生成绩表,表名 stu(学生表),字段有:id(主键),name(学生姓名),subject(学科),score(分数) 1.查询该表中,所有科目都及格的学生 ; 说明:都及格的话,就是最 ...

  10. 正则提取字符串IP地址，返回IP列表

    public class Main { public static void main(String args[]) { String str = "10.11.90.1 asedfa 1. ...