在页面上加入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. JavaScript高级程序设计-13：事件

    JavaScript与HTML之间的交互是通过事件实现的. 一.事件流 首先我们要明白事件流的概念.当我们点击一个按钮时,也点击了按钮的容器元素,甚至也点击了整个事件.事件流描述就是从页面中接收事件的 ...

  2. [Angular Tutorial] 5-Filtering Repeaters

    在上一步中,我们花了很大功夫来布局应用的基础,所以我们现在做点简单点的吧!我们将会添加一个全文本搜索框(没错,这很简单). ·我们的应用现在会有一个搜索框,注意页面中手机列表的改变取决于用户在搜索框键 ...

  3. UVa 10716 - Evil Straw Warts Live

    题目大意:给一个字符串,判断是否能通过交换字母构成回文,如果能,计算所需的最小交换次数. 如果字符串中出现奇数次的字母的个数>1,则不能构成回文.然后...就没思路了...看网上说用贪心的思想先 ...

  4. XML解析之DOM解析技术案例

    Java代码: package com.xushouwei.xml; import java.io.File; import javax.xml.parsers.DocumentBuilder; im ...

  5. centos下修改hostname,ip,netmask,gateway,dns

    http://itlab.idcquan.com/linux/set/917191.html http://jingyan.baidu.com/article/e4d08ffdd417660fd3f6 ...

  6. Cocos2d-x 多分辨率支持

    最近遇到多分辨率支持问题,所以查了一些资料.将一些收获共享一下,以便自己和其他需要的朋友日后参考. 如果我要建立一个cocos2d-x项目,我的目标是支持iphone3G( 480, 320 ),ip ...

  7. win7如何安装mircosoft SDKs

    WIN7不能安装SDK 7.1是因为系统程序里含Microsoft .NET Framework 4 Extended和Microsoft .NET Framework 4 Client Profil ...

  8. Weex系列一、构建Weex工程

    Weex比React Native更简单,更容易学习,并且做到真正的跨平台,一套代码可以多个平台运行.所以建议大家都用Weex吧. 一.安装Node 已经安装Node的,请忽略过去. 检查Node是否 ...

  9. Bootstrap入门（十一）组件5：输入框组

    Bootstrap入门(十一)组件5:输入框组   1.为其中添加第一个输入框 2.添加额外的元素 3.为用户提供标识 4.改变输入框的尺寸 5.为额外添加多选/单选框 6.与按钮结合 7.与下拉菜单 ...

  10. springmvc java.lang.NoSuchMethodError: com.fasterxml.jackson.core.JsonFactory.requiresPropertyOrdering()Z

    在hibernate spring springMVC整合的时候出现下面的情况: WARNING: Exception encountered during context initializatio ...