欲观看效果请点击下载，然后用浏览器打开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. MSDN WinUSB Example

    The WinUSB user-mode library uses device interface classes to communicate with the kernel-mode USB s ...

  2. [C# 基础知识系列]专题八: 深入理解泛型(二)

    引言: 本专题主要是承接上一个专题要继续介绍泛型的其他内容,这里就不多说了,就直接进入本专题的内容的. 一.类型推断 在我们写泛型代码的时候经常有大量的"<"和"& ...

  3. webpack原理与实战

    webpack是一个js打包工具,不一个完整的前端构建工具.它的流行得益于模块化和单页应用的流行.webpack提供扩展机制,在庞大的社区支持下各种场景基本它都可找到解决方案.本文的目的是教会你用we ...

  4. INotifyPropertyChanged接口的实现

    何时实现INotifyPropertyChanged接口 官方解释:INotifyPropertyChanged  接口用于向客户端(通常是执行绑定的客户端)发出某一属性值已更改的通知.官方解释的很模 ...

  5. indy10的idhttpServer应答字符串

    indy10的idhttpServer应答字符串 先看应答字符串的代码: procedure TIdIOHandler.Write(const AOut: string; AByteEncoding: ...

  6. 在arcgis使用python脚本进行字段计算时是如何解决中文问题的

    来自:https://www.jb51.net/article/73561.htm 一.引言 在arcgis打开一个图层的属性表,可以对属性表的某个字段进行计算,但是在平常一般都是使用arcgis提供 ...

  7. yii开发第一部分之执行流程

    一 目录文件 |-framework 框架核心库 |--base 底层类库文件夹,包含CApplication(应用类,负责全局的用户请求处理,它管理的应用组件集,将提供特定功能给整个应用程序),CC ...

  8. 识骨寻踪第一季/全集Bones迅雷下载

    第一季 Bones Season 1 (2005)看点:这是一部专门从“骨头”上寻找破案线索的刑侦剧.女博士布莱南绰号“骨头”(艾米丽·丹斯切尔 Emily Deschanel 饰),是个学识渊博.专 ...

  9. XCode的The argument is invalid

      google查了一下,没找到解决的方法.有一篇blog应该有写怎么解决,可惜是wordpress.com的站点,打不开,网页快照也看不了-   后来回忆了一下操作步骤,只是添加了cocos2dx的 ...

  10. Wireshark的简介

    -------------------------------------------------------------- <Wireshark数据包分析实战>这本书其实还很不错,当时买 ...