在页面上加入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. chorme加减乘除浮点数处理

    在处理简单的1-0.7的时候发现chorme给的结果竟然是0.30000000000000004,瞬间蛋疼了,这数据能用?! 然后去百度找到了简单的两个数的加减乘除,然后修改了下,除了除法都可以多个数 ...

  2. Python3基础 pop() 删除 键为指定值的项

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  3. Python3基础 使用clear() 清空一个字典

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  4. object-c中的BOOL类型

    object-c中的布尔类型比C语言中的bool类型早了10年,它具有YES和NO两种值.在object-c中的布尔类型BOOL实际上是一种带符号的字符类型(signed char),它使用的空间是1 ...

  5. gdb命令整理

    Microsoft Windows XP [版本 ] (C) 版权所有 - Microsoft Corp. C:\Documents and Settings\Administrator>e: ...

  6. 选择移动web开发框架研究——有mui、frozenui以及Sencha Touch等

    纯粹的总结一下移动web开发框架,移动 web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家 ...

  7. 基于ASIO的协程库orchid简介

    什么是orchid? orchid是一个构建于boost库基础上的C++库,类似于python下的gevent/eventlet,为用户提供基于协程的并发模型. 什么是协程: 协程,即协作式程序,其思 ...

  8. 如何在NodeJS项目中优雅的使用ES6

    如何在NodeJS项目中优雅的使用ES6 NodeJs最近的版本都开始支持ES6(ES2015)的新特性了,设置已经支持了async/await这样的更高级的特性.只是在使用的时候需要在node后面加 ...

  9. 没有苹果电脑打包iOS平台的 Ionic 2程序——《Ionic 2 实例开发》更新内容

    没有苹果电脑打包iOS平台的 Ionic 2程序--<Ionic 2 实例开发>更新内容春节刚过,祝各位新的一年里万事如意,一帆风顺.<Ionic 2 实例开发>在这段时间里更 ...

  10. 2017年Unity开发环境与插件配置安装（总体介绍）

    最近(2017年初)有朋友问,Unity客户端开发如何在机器配置一般的情况下,配置更高效的开发环境,进一步加快开发进度. 推荐如下: Win10(或者Win8)+Unity5.5.1版本(2017年2 ...