在页面上加入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. orientationchange

    <!DOCTYPE html> <html> <head> <title>OrientationChange Event Example</tit ...

  2. Cell.reuseIdentifier 指什么

    Cell.reuseIdentifier 指的是 默认为空,如果不定义,在执行 [_tableView registerNib:templateCellNib forCellReuseIdentifi ...

  3. PHP中file_exists与is_file、is_dir的区别，以及执行效率的比较

    判断文件是否存在,有2个常用的PHP函数:is_file 和 file_exists, 判断文件夹是否存在,有2个常用PHP函数:is_dir 和 file_exists, 即 file_exists ...

  4. js如何准确获取当前页面url网址信息

    1.window.location.href(设置或获取整个 URL 为字符串) var test = window.location.href;alert(test);返回:http://i.cnb ...

  5. jQuery children等筛选用法

    jQuery children等筛选用法: <%@ page language="java" import="java.util.*" pageEncod ...

  6. java配置环境变量-及原因

    为什么java要配置环境变量? 那就要从java的编译和解析过程说起 java文件的编译和解析过程 一.一个hellow.java文件,要经历先编译(变成hellow.class),再解析(解析成机器 ...

  7. Struct 和 Union 的详细区别

    Union: 共用体 Struct:结构体 两者的区别: 1:共用体和结构体都是由多个不同的数据类型成员组成, 但在任何同一时刻, 共用体只存放一个被选中的成员, 而结构体则存放所有的成员变量. 2: ...

  8. Oracle检查锁及其等待的行ROWID

    SELECT l.session_id sid ,        substr(o.owner,               1,               8) owner,        o.o ...

  9. 《JAVASCRIPT高级程序设计》创建对象的七种模式

    细看javascript创建对象模式的诞生,具体的脉络为:不使用任何模式——工厂模式——构造函数模式——原型模式——组合使用构造函数模式——动态原型模式——寄生构造函数模式——稳妥构造函数模式.每一种 ...

  10. Win10+Ubuntu16.04双系统安装

    硬件工具: 一台PC 一个U盘(8GB以上) Win10安装(已经装好Win10的小朋友们请无视): 准备工作: 下载Win10升级助手 保证系统盘有8GB以上剩余空间 安装步骤(由于安装过程中未记录 ...