在页面上加入canvas标签：

<body>

<canvas id="c1"  width="600px" height="600px">

    <span>不支持canvas浏览器</span>

</canvas> <!--默认：宽300 高150-->

</body>

js部分：

绘制秒的刻度的思路是先用oGC.stroke()循环画60个6°的扇形，将它们拼接成一整个圆，然后用oGC.fill()画一个实心的圆，半径比之前拼接的那个圆短，用实心的圆挡住中间多余的线，这样秒的刻度就画出来了，以此类推可以画出分的刻度；

让时钟自动走起来：获取new Date()下的真实时、分、秒时间，然后用‘角度*Math.PI/180=弧度’的公式换算成弧度，赋值给时针、分针、秒针的圆中对应的弧度值，注意：弧度的变化是沿着顺时针的方向增加的，也就是在秒针指向0秒时，它的弧度是-90°。最后设置一个定时器，每隔1s调用一次封装的函数：

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');  

    function toDraw(){

        var a = 200;

        var b = 200;

        var r = 100;

        oGC.clearRect(0,0,oC.width,oC.height);

        //获取时间

        var oDate = new Date();

        var oHour = oDate.getHours();

        var oMin = oDate.getMinutes();

        var oSec = oDate.getSeconds();

        var oHourvalue = (-90 + oHour*30 + oMin/2 )*Math.PI/180;

        var oMinvalue = (-90 + oMin*6 )*Math.PI/180;

        var oSecvalue = (-90 + oSec*6 )*Math.PI/180;

        //绘制秒的刻度

        oGC.beginPath();

        for(var i=0;i<60;i++){

            oGC.moveTo(a,b);

            oGC.arc(a,b,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

        }

        oGC.closePath();

        oGC.stroke();

        oGC.fillStyle = 'white';

        oGC.beginPath();

        oGC.moveTo(a,b);

        oGC.arc(a,b,r*19/20,0,360*Math.PI/180,false);

        oGC.closePath();

        oGC.fill();

        //绘制分的刻度

        oGC.lineWidth = 3;

        oGC.beginPath();

        for(var i=0;i<12;i++){

            oGC.moveTo(a,b);

            oGC.arc(a,b,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

        }

        oGC.closePath();

        oGC.stroke();

        oGC.fillStyle = 'white';

        oGC.beginPath();

        oGC.moveTo(a,b);

        oGC.arc(a,b,r*17/20,0,360*Math.PI/180,false);

        oGC.closePath();

        oGC.fill();

        //绘制时针

        oGC.lineWidth = 4;

        oGC.beginPath();

        oGC.moveTo(a,b);

        oGC.arc(a,b,r*13/20,oHourvalue,oHourvalue,false);

        oGC.closePath();

        oGC.stroke();

        //绘制分针

        oGC.lineWidth = 2;

        oGC.beginPath();

        oGC.moveTo(a,b);

        oGC.arc(a,b,r*18/20,oMinvalue,oMinvalue,false);

        oGC.closePath();

        oGC.stroke();

        //绘制秒针

        oGC.beginPath();

        oGC.moveTo(a,b);

        oGC.arc(a,b,r*19/20,oSecvalue,oSecvalue,false);

        oGC.closePath();

        oGC.stroke();

    }；

    setInterval(toDraw,1000);

};

</script>

用canvas的arc绘制时钟的更多相关文章

  1. 用canvas绘制时钟

    用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...

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

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

  3. Canvas绘制时钟

    ①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...

  4. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  5. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  6. 小任务之Canvas绘制时钟

    背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/ ...

  7. 基础canvas应用-钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

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

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

  9. Canvas基础——钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

随机推荐

  1. MS SQL Server数据库修复/MDF数据文件数据恢复/MDF质疑/mdf无法附加

    微软的SQL Server 数据库最常用的有两种类型的文件: 1.主要数据文件,文件后缀一般是.MDF: 2.事务日志文件,文件后缀一般是.LDF. 用户数据表.视图.存储过程等等数据,都是存放在MD ...

  2. 学习tabhost 实现微博的主界面

    2014-05-27 吴文付 微博的主界面还是很漂亮的,我们这里来熟悉下tabhost的使用, 网上资料很多,主要参考了:http://blog.csdn.net/shulianghan/articl ...

  3. pyv8安装

    http://www.thinksaas.cn/topics/0/400/400915.html

  4. 一分钟完成MySQL5.7安装部署

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://suifu.blog.51cto.com/9167728/1855415 Part ...

  5. Mac下使用Brew搭建PHP(LNMP/LAMP)开发环境

    Mac下搭建lamp开发环境很容易,有xampp和mamp现成的集成环境.但是集成环境对于经常需要自定义一些配置的开发者来说会非常麻烦,而且Mac本身自带apache和php,在brew的帮助下非常容 ...

  6. --@angularJS--综合小实例1

    <!DOCTYPE HTML><html ng-app="myapp"><head> <title>综合小实例</title& ...

  7. Redhat6.4下配置本地yum

    一.准备工作1. Linux安装盘插入光驱 2. 挂载光驱 [root@localhost ~]# mount /dev/cdrom /mnt/  mount: block device /dev/s ...

  8. JWPlayer支持SD/HD

    First, we have to render two versions of our video: an SD (standard definition) and HD (high definit ...

  9. Bootstrap入门（二十八）JS插件5：工具提醒

    Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...

  10. 初识Dapper

    16年年底开发一个项目,拍卖的项目,对于我这个不入流的程序员来说,雪微是个挑战.程序猿这个行业就是学到老用到老吧.个人比较喜欢sql原生的写法,对EF 还是不怎么感冒,EF 虽然强大,但是用起来还不怎 ...