在页面上加入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. linux下安装mysql（编译mysql源码）

    编译所需软件地址 http://mysql.mirror.kangaroot.net/Downloads/  -- 下载需要的mysql版本例如mysql-5.5.39.tar.gz    目前还不太 ...

  2. iOS 之 调试、解决BUG

    iOS 解决一个复杂bug 之 计分卡 iOS 调试 之 打印 iOS 错误之 NSObject .CGFloat iOS bug 之 H5 页面没有弹出提示框 iOS 日志工具 CocoaLumbe ...

  3. PHP使用GD2库画图，图像无法输出解决方法

    在CS6编辑环境下,使用php的GD2库绘制图像,在浏览器上输出可能会出现图像无法输出的情况,目前发现两个解决方法:方法1:用记事本写,再另存为utf-8 no bom的格式. 方法2:在代码中添加o ...

  4. webx学习

    webx框架学习指南 http://openwebx.org/docs/Webx3_Guide_Book.html webx学习(一)——初识webx webx学习(二)——Webx Framewor ...

  5. git 配置SSH免密

    1.安装TortoiseGit(比较简单,直接在官网上下载安装包安装) 2.打开下图标识 点击 generate按钮 生成key(需要等一会)   3.生成Key保存成.ppk文件,记得存放路径,(建 ...

  6. 按钮（Buton）组价的功能和用法

    Button继承了TextView,它主要是在UI界面上生成一个按钮,该按钮可以供用户单机,当用户单击按钮时,按钮会触发一个onClick事件. 按钮使用起来比较容易,可以通过为按钮指定android ...

  7. Java线程：线程状态

    线程可以创建6状态: New()新创建.Runnable(可运行).Blocked(被阻塞). Waiting(等待).Timed waiting(计时等待).Terminated(被终止)1 新建线 ...

  8. Jquery实现的几款漂亮的时间轴

    引言 最近项目中使用了很多前端的东西,对于我一个做后台开发的人员,这是一个很好的锻炼的机会.经过这段时间的学习,感觉前端的东西太多了,太强大了,做出来的东西太炫酷了.现在有很多开源的前端框架,做的都非 ...

  9. hdoj 2674 N!

    N!Again Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  10. 微信小程序教程（第一篇）

    目录 第一篇小程序概述 第二篇如何注册接入小程序及搭建开发环境 第三篇小程序的架构及实现机制,信道服务及会话管理 第四篇小程序开发基本框架及其限制与优化 第五篇小程序开发项目实例,测试及发布 .... ...