欲观看效果请点击下载，然后用浏览器打开index.html查看。

本作 Github地址：https://github.com/horn19782016/StopWatch

图例：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>秒表 19.3.5 8:28 by:逆火狂飙 horn19782016@163.com</title>

     <style>
     #canvas{
        background:#ffffff;
        cursor:pointer;
        margin-left:10px;
        margin-top:10px;
        -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        box-shadow:3px 3px 6px rgba(0,0,0,0.5);
     }

     #controls{
        margin-top:10px;
        margin-left:15px;
     }
     </style>

    </head>

     <body onload="init()">
        <div id="controls">
            <input id='animateBtn' type='button' value='开始'/>
            <input id='elapsedTxt' type='text' value='' readonly/>
        </div>

        <canvas id="canvas" width="400px" height="400px" >
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
var paused=true;
animateBtn.onclick=function(e){
    paused=! paused;

    if(paused){
        animateBtn.value="开始";
        writeElapsed();
        stopWatch.stop();
    }else{
        animateBtn.value="停止";
        elapsedTxt.value='0';
        stopWatch.start();
        window.requestAnimationFrame(animate);
    }

    //alert("isRunning()="+stopWatch.isRunning());
    //alert("getElapsedTime()="+stopWatch.getElapsedTime());
    //alert("getPointerAngle()="+stopWatch.getPointerAngle());
}

var stopWatch;// 秒表对象
var ctx;// 绘图环境
var r;// 表盘半径
function init(){
    // init Canvas
    var canvas=document.getElementById('canvas');
    r=200;
    canvas.width =2*r;
    canvas.height=2*r;
    ctx=canvas.getContext('2d');

    stopWatch=new Stopwatch();
    stopWatch.reset();

    index=0;
};

function writeElapsed(){
    var date3=stopWatch.getElapsedTime();

    //计算出相差天数
    var days=Math.floor(date3/(24*3600*1000))

    //计算出小时数
    var leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数
    var hours=Math.floor(leave1/(3600*1000))

    //计算相差分钟数
    var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
    var minutes=Math.floor(leave2/(60*1000))

    //计算相差秒数
    var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
    var seconds=Math.round(leave3/1000)

    var str="共用时";
    if(days>0){
        str=str+days+"天";
    }
    if(hours>0){
        str=str+hours+"小时";
    }
    if(minutes>0){
        str=str+minutes+"分钟";
    }
    if(seconds>0){
        str=str+seconds+"秒";
    }
    str=str+(date3 % 1000)+"毫秒";

    elapsedTxt.value=str;
}

function writeUsed(){
    var date3=stopWatch.getElapsedTime();

    //计算出相差天数
    var days=Math.floor(date3/(24*3600*1000))

    //计算出小时数
    var leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数
    var hours=Math.floor(leave1/(3600*1000))

    //计算相差分钟数
    var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
    var minutes=Math.floor(leave2/(60*1000))

    //计算相差秒数
    var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
    var seconds=Math.round(leave3/1000)

    var str="已用时";
    if(days>0){
        str=str+days+"天";
    }
    if(hours>0){
        str=str+hours+"小时";
    }
    if(minutes>0){
        str=str+minutes+"分钟";
    }
    if(seconds>0){
        str=str+seconds+"秒";
    }
    //str=str+(date3 % 1000)+"毫秒";

    elapsedTxt.value=str;
}

function draw(){
    // Clear Canvas
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
    ctx.fillStyle="#ECF5FF";
    ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);

    // Paint Scales
    var width = ctx.canvas.width;
    var height = ctx.canvas.height;
    var BL = width / 200;

    ctx.save();
        ctx.translate(r,r);// 平移到几何中心

        // 画外面的蓝边
        ctx.beginPath();
        ctx.lineWidth = 5 * BL;//线要 乘上 比例
        ctx.strokeStyle = "#2894FF";
        ctx.arc(0, 0, r - 18 * BL, 2 * Math.PI, false);//乘上比例
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.lineWidth = 1 * BL;//线要 乘上 比例
        ctx.strokeStyle = "#2894FF";
        ctx.arc(0, 0, 2 * BL, 2 * Math.PI, false);//乘上比例
        ctx.stroke();
        ctx.closePath();

        // 画表盘数字
        ctx.fillStyle="#2894FF";
        var hourNumber = [15, 20, 25, 30, 35, 40, 45,50, 55, 0, 5,10,];
        ctx.font = 10 * BL + 'px Arial';//字体也有乘比例 字符串拼接
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        hourNumber.forEach(function (number, i) {
            var rad = 2 * Math.PI / 12 * i;
            var x = Math.cos(rad) * (r - 8 * BL);
            var y = Math.sin(rad) * (r - 8 * BL);
            ctx.fillText(number, x, y);
        });

        // 画刻度
        for (var i = 0; i < 60; i+=0.5) {
            var rad = 2 * Math.PI / 60 * i;

            var x1 = Math.cos(rad) * (r - 20 * BL);
            var y1 = Math.sin(rad) * (r - 20 * BL);
            var x2 = Math.cos(rad) * (r - 24 * BL);
            var y2 = Math.sin(rad) * (r - 24 * BL);

            if (i % 2.5 == 0) {
                x2 = Math.cos(rad) * (r - 26 * BL);
                y2 = Math.sin(rad) * (r - 26 * BL);
            } 

            ctx.beginPath();
            ctx.lineWidth = 0.5 * BL;//线要 乘上 比例
            ctx.strokeStyle = "#2894FF";
            ctx.moveTo(x1,y1);
            ctx.lineTo(x2,y2);

            ctx.stroke();
            ctx.closePath();
        }

        // 画秒针
        var date = new Date();
        var second=date.getSeconds();
        var angleS=second*6;

        ctx.save();
            //ctx.rotate(getRad(-90));
            ctx.lineWidth=0.5;

            ctx.strokeStyle = "black";
            ctx.beginPath();

            var angle=stopWatch.getPointerAngle();
            if(Math.abs(angle%90,0)<2){
                writeUsed();
            }
            ctx.rotate(getRad(angle));

            ctx.moveTo(-1 * BL, 16 * BL);//画出一个秒针 x轴-2 y轴20
            ctx.lineTo(1 * BL,16 * BL);
            ctx.lineTo(1, -r + 26 * BL);
            ctx.lineTo(-1, -r + 26 * BL);
            ctx.fill();

            ctx.stroke();
            ctx.closePath();
        ctx.restore();

    ctx.restore();
}

function animate(){
    if(!paused){
        draw();

        //setTimeout( function(){
            window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
        //}, 0.20 * 1000 );// 延时执行
    }
}

//---------------------------------------------------Stopwatch类定义开始------------------------------------------------------------------->>
Stopwatch=function(){}
Stopwatch.prototype={
    // Property
    startTime:0,
    running:false,
    elapsed:0,

    // method
    start:function(){
        this.startTime=+new Date();
        this.elapsed=0;
        this.running=true;
    },

    stop:function(){
        this.elapsed=(+new Date())-this.startTime;
        this.running=false;
    },

    getElapsedTime:function(){
        if(this.running){
            return (+new Date())-this.startTime;
        }else{
            return this.elapsed;
        }
    },

    getPointerAngle:function(){
        var sec=this.getElapsedTime()/1000;
        return (sec*6) % 360;
    },

    getSeconds:function(){
        var sec=this.getElapsedTime()/1000;
        return sec;
    },

    isRunning:function(){
        return this.running;
    },

    reset:function(){
        this.elapsed=0;
    },
}
//---------------------------------------------------Stopwatch类定义结束-------------------------------------------------------------------<<
//  常规函数:角度得到弧度
function getRad(degree){
    return degree/180*Math.PI;
}
//-->
</script>

2019年3月5日14点19分

[Canvas]计时表/秒表的更多相关文章

  1. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  2. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  3. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  4. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  5. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  6. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  7. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  8. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  9. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. TVB三个台

    翡翠台http://token.tvb.com/stream/live/hls/mobilehd_jade.smil 高清翡翠,http://token.tvb.com/stream/live/hls ...

  2. TrinityCore3.3.5环境搭建

    说起TrinityCore,可能知道的人不多,但是说起MaNGOS(芒果)知道的人应该就不少了.MaNGOS是一个魔兽私服服务器端,TrinityCore继承自TrinityCore并且做了优化,一直 ...

  3. Android 数据存储01之SharedPreferences

    Android 数据存储01之SharedPreferences 版本 修改内容 日期 修改人 V1.0 原始版本 2013/2/20 skywang 1 SharedPreferences概括 Sh ...

  4. python测试开发django-21.admin后台表名称和字段显示中文

    前言 admin后台页面表名称(默认会多加一个s)和字段名称是直接显示在后台的,如果我们想设置成中文显示需加verbose_name和verbose_name_plural属性 verbose_nam ...

  5. MySQL中进行树状所有子节点的查询 . mysql根据父id 查询所有的子id

    在Oracle 中我们知道有一个 Hierarchical Queries 通过CONNECT BY 我们可以方便的查了所有当前节点下的所有子节点.但很遗憾,在MySQL的目前版本中还没有对应的功能. ...

  6. SharePoint 取消分享时的默认发邮件

    前言 最近遇到一个需求,就是sharepoint默认分享的时候,会默认勾选发送邮件的功能.而用户,经常会用到分享的功能,但是不需要发送邮件,需要默认不勾选这个操作. 这样,就需要修改sharepoin ...

  7. JQuery攻略（六）菜单导航

    jQuery菜单导航的基础应用 此章节有 1.0 页面导航 1.01面包屑菜单 1.02菜单悬停 1.03菜单快捷键 1.04两个单独的菜单 1.05折叠菜单 1.01面包屑菜单 html <b ...

  8. mongodb常用查询

    mongo sql 说明 db.users.find() select * from users 从user表中查询所有数据 db.users.find({“username” : “joe”, “a ...

  9. Eclipse with ADT的安装和使用

    我们从安卓官方网站下载下来的eclipse是捆绑好了ADT的,所以不用自己安装插件. 我现在在这个目录下简历一个空的文件夹--virtual,用来来存放虚拟机. 然后,在我的电脑上右键->属性, ...

  10. 《精通Oracle SQL(第2版) 》

    <精通Oracle SQL(第2版) > 基本信息 作者: (美)Karen Morton    Kerry Osborne    Robyn Sands    Riyaj Shamsud ...