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

<!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. HDU-1431-素数回文（暴力打表）

    素数回文 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  2. ubutu16.04修改分辨率

    http://blog.csdn.net/oiken/article/details/71088230 vmware不能自动适应Ubuntu16.04的分辨率,而且Ubuntu16.04的displa ...

  3. 图解SQL Server 2008入门必会

    图解SQL Server 2008入门必会   https://jingyan.baidu.com/article/656db918eded1ee381249c0b.html 图解SQL Server ...

  4. origin横纵坐标颠倒

    origin默认是只能多个纵坐标,不能多个横坐标,所以这种情况只能先作成多个Y,然后像这样exchange一下.

  5. oracle数据库修改密码

    忘记了数据库的登录密码,oracle数据库无法登录了. 先删除原先的密码保存文件: del E:\oracle_app\Administrator\product\11.2.0\dbhome_1\da ...

  6. vue控制父子组件渲染顺序

    在父组件中,如下图渲染子组件,那如何在父组件中加入一些数据获取逻辑且能控制子组件渲染呢. 就是像在上图中红框圈起来的那样,挂个 ok(其他你自己定义的也可以) 参数,同时在父组件的任何生命周期中去改变 ...

  7. [转] 利用js实现 禁用浏览器后退

    [From] http://blog.csdn.net/zc474235918/article/details/53138553 现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免 ...

  8. HDU 2879 数论

    HeHe Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submis ...

  9. C++ GUI Qt4编程(02)-1.2quit

    1. 根据C++ GUI Qt4编程(第二版)整理2. 系统:centos7:  Qt版本:5.5.13. 程序:quit.cpp #include <QApplication> #inc ...

  10. Sqlite CodeFirst的初级实现

    示例实体: using System; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnn ...