前面的话

　　前面介绍过canvas粒子时钟的绘制，本文将详细介绍canvas自适应圆形时钟绘制

效果演示

　　最终自适应圆形时钟的效果如下所示

功能分析

　　下面来分析一下该圆形时钟的功能

　　【1】静态背景

　　对于时钟来说，背景是不变的，包括外层钟框、内层圆点及数字、以及中心点的固定按扣

　　【2】动态时钟

　　时态的动态，表现在秒针、分针、时针随着当前时间的变化的变化。开启一个每秒变化1次定时器，秒针与当前的时间的秒数保持一致，分针的变化与当前的秒数和分钟数都有关，时针的变化与当前的分钟数和小时数都有关

　　【3】自适应

　　要做到时钟自适应，需要将时钟内部的尺寸绘制与时钟整体的宽高相关联，而不能设置为固定值

　　下面是一张时钟的简易分析图

静态时钟

　　下面来实现静态的时钟背景，包括外层钟框、内层圆点及数字、以及中心点的固定按扣，以时钟尺寸为200*200为基准，则半径为100，通过translate()将圆心点调整为(0,0)点

【初始设置】

　　由于外面经常要用到R和cxt.lineWidth，所以将其保存为变量

var cxt = drawing.getContext('2d');

var W = drawing.width = 400;

var H = drawing.height = 400;

var R = W / 2;

var cw = cxt.lineWidth = 0.1*R;

【外层钟框】

　　为了将外层钟框不超出canvas区域，则其半径设置为R-cw/2，线条宽度与半径成比例

cxt.translate(R,R);

cxt.beginPath();

cxt.arc(0,0,R-cw/2,0,2*Math.PI,false);

cxt.stroke();

【内层数字】

　　在距离圆心点0.8R-cw/2处，绘制12个数字，表示当前的分钟数，数字的字体大小与半径成比例

cxt.beginPath();

cxt.font = 0.2 * R + 'px 宋体';

cxt.textAlign = 'center';

cxt.textBaseline = 'middle';

var r1 = 0.8*R  - cw/2;

for(var i = 12; i > 0; i--){

    var radius = 2*Math.PI/12 * i + 1.5*Math.PI;

    var x = Math.cos(radius) * r1;

    var y = Math.sin(radius) * r1;

    cxt.fillText(i,x,y);

}

【内层原点】

　　在距离圆心点0.9R-cw/2处，绘制60个圆点，表示当前的秒数，当前秒数与分钟数处于同一角度时，表示为大圆点(半径为cx/5)，否则为小圆点(半径为cx/8)

cxt.beginPath();

var r2 = 0.9*R - cw/2;

for(var i = 0; i < 60; i++){

    var radius = 2*Math.PI/60*i + 1.5*Math.PI;

    var x = Math.cos(radius) * r2;

    var y = Math.sin(radius) * r2;

    cxt.beginPath();

    if(i%5 === 0){

      cxt.arc(x,y,cw/5,0,2*Math.PI,false);

    }else{

      cxt.arc(x,y,cw/8,0,2*Math.PI,false);

    }

    cxt.fill();

}

【绘制中心点的固定按扣】

cxt.beginPath();

cxt.arc(0,0,cw/3,0,2*Math.PI,false);

cxt.fill();

　　最终，静态背景封装为函数drawStatics()，代码如下

<canvas id="drawing" style="border:1px solid black"></canvas>

<script>

var drawing = document.getElementById('drawing');

if(drawing.getContext){

    var cxt = drawing.getContext('2d');

    var W = drawing.width = 200;

    var H = drawing.height = 200;

    var R = W / 2;

    var cw = cxt.lineWidth = 0.1*R;

    function drawStatics(){

        cxt.translate(R,R);

        cxt.beginPath();

        cxt.lineWidth = 0.1*R;

        cxt.arc(0,0,R-cw/2,0,2*Math.PI,false);

        cxt.stroke(); 

        cxt.beginPath();

        cxt.font = 0.2 * R + 'px 宋体';

        cxt.textAlign = 'center';

        cxt.textBaseline = 'middle';

        var r1 = 0.8*R  - cw/2;

        for(var i = 12; i > 0; i--){

            var radius = 2*Math.PI/12 * i + 1.5*Math.PI;

            var x = Math.cos(radius) * r1;

            var y = Math.sin(radius) * r1;

            cxt.fillText(i,x,y);

        }

        cxt.beginPath();

        var r2 = 0.9*R - cw/2;

        for(var i = 0; i < 60; i++){

            var radius = 2*Math.PI/60*i + 1.5*Math.PI;

            var x = Math.cos(radius) * r2;

            var y = Math.sin(radius) * r2;

            cxt.beginPath();

            if(i%5 === 0){

              cxt.arc(x,y,cw/5,0,2*Math.PI,false);

            }else{

              cxt.arc(x,y,cw/8,0,2*Math.PI,false);

            }

            cxt.fill();

        }

        cxt.beginPath();

        cxt.arc(0,0,cw/3,0,2*Math.PI,false);

        cxt.fill();

    }

    function draw(){

      cxt.clearRect(0,0,W,H);

      drawStatics();

    }

    draw();

}

</script>

　　静态效果如下

动态效果

　　下面来分为时针、分针、秒针来进行动态效果

【秒针】

　　开启一个每秒变化1次定时器，秒针与当前的时间的秒数保持一致　　

function drawSecond(second){

    cxt.save();

    cxt.translate(R,R);

    cxt.beginPath();

    var radius = 2*Math.PI/60 * second;

    cxt.rotate(radius);

    cxt.lineWidth = 2;

    cxt.moveTo(0,cw*2);

    cxt.lineTo(0,-0.8*R);

    cxt.strokeStyle = 'red';

    cxt.stroke();

    cxt.restore();

}

【分针】

　　分针的变化与当前的秒数和分钟数都有关

function drawMinute(minute,second){

    cxt.save();

    cxt.translate(R,R);

    cxt.beginPath();

    var radius = 2*Math.PI/60 * minute;

    var sRaiuds = 2*Math.PI/60/60 * second;

    cxt.rotate(radius + sRaiuds);

    cxt.lineWidth = 4;

    cxt.lineCap = 'round';

    cxt.moveTo(0,cw);

    cxt.lineTo(0,-(0.8*R - cw/2));

    cxt.stroke();

    cxt.restore();

}

【时针】

　　时针的变化与当前的分钟数和小时数都有关

function drawHour(hour,minute){

    cxt.save();

    cxt.translate(R,R);

    cxt.beginPath();

    var radius = 2*Math.PI/12 * hour;

    var mRaiuds = 2*Math.PI/12/60 * minute;

    cxt.rotate(radius + mRaiuds);

    cxt.lineWidth = 6;

    cxt.lineCap = 'round';

    cxt.moveTo(0,cw/2);

    cxt.lineTo(0,-(0.8*R - cw*2));

    cxt.stroke();

    cxt.restore();

}

完整代码

　　现在，需要对代码进行调整，因为canvas是按照代码顺序进行绘制的，所以代码顺序应该是，静态背景(时钟外框、圆点及数字) -> 动态效果(秒针、分针、时针) -> 中心按扣

　　因此，需要将中心按扣的代码从静态背景函数drawStatics()中分离出来，并重新安排代码顺序

　　由于浏览器的定时器存在误差，因此设置为1000ms并不合适，由于系统卡顿等原因，可能会跳过某次效果，因此，设置为500ms

　　最终完整代码如下所示

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

<canvas id="drawing"></canvas>

<script>

var drawing = document.getElementById('drawing');

if(drawing.getContext){

    var cxt = drawing.getContext('2d');

    var W = drawing.width = 200;

    var H = drawing.height = 200;

    var R = W / 2;

    var cw = cxt.lineWidth = 0.1*R;

    function drawStatics(){

        cxt.save();

        cxt.translate(R,R);

        cxt.beginPath();

        cxt.lineWidth = 0.1*R;

        cxt.arc(0,0,R-cw/2,0,2*Math.PI,false);

        cxt.stroke(); 

        cxt.beginPath();

        cxt.font = 0.2 * R + 'px 宋体';

        cxt.textAlign = 'center';

        cxt.textBaseline = 'middle';

        var r1 = 0.8*R  - cw/2;

        for(var i = 12; i > 0; i--){

            var radius = 2*Math.PI/12 * i + 1.5*Math.PI;

            var x = Math.cos(radius) * r1;

            var y = Math.sin(radius) * r1;

            cxt.fillText(i,x,y);

        }

        cxt.beginPath();

        var r2 = 0.9*R - cw/2;

        for(var i = 0; i < 60; i++){

            var radius = 2*Math.PI/60*i + 1.5*Math.PI;

            var x = Math.cos(radius) * r2;

            var y = Math.sin(radius) * r2;

            cxt.beginPath();

            if(i%5 === 0){

              cxt.arc(x,y,cw/5,0,2*Math.PI,false);

            }else{

              cxt.arc(x,y,cw/8,0,2*Math.PI,false);

            }

            cxt.fill();

        }

        cxt.restore();

    }

    function drawDot(){

        cxt.save();

        cxt.translate(R,R);

        cxt.beginPath();

        cxt.arc(0,0,cw/3,0,2*Math.PI,false);
        cxt.fillStyle = '#fff';
        cxt.fill();

        cxt.restore();

    }

    function drawSecond(second){

        cxt.save();

        cxt.translate(R,R);

        cxt.beginPath();

        var radius = 2*Math.PI/60 * second;

        cxt.rotate(radius);

        cxt.lineWidth = 2;

        cxt.moveTo(0,cw*2);

        cxt.lineTo(0,-0.8*R);

        cxt.strokeStyle = 'red';

        cxt.stroke();

        cxt.restore();

    }

    function drawMinute(minute,second){

        cxt.save();

        cxt.translate(R,R);

        cxt.beginPath();

        var radius = 2*Math.PI/60 * minute;

        var sRaiuds = 2*Math.PI/60/60 * second;

        cxt.rotate(radius + sRaiuds);

        cxt.lineWidth = 4;

        cxt.lineCap = 'round';

        cxt.moveTo(0,cw);

        cxt.lineTo(0,-(0.8*R - cw/2));

        cxt.stroke();

        cxt.restore();

    }

    function drawHour(hour,minute){

        cxt.save();

        cxt.translate(R,R);

        cxt.beginPath();

        var radius = 2*Math.PI/12 * hour;

        var mRaiuds = 2*Math.PI/12/60 * minute;

        cxt.rotate(radius + mRaiuds);

        cxt.lineWidth = 6;

        cxt.lineCap = 'round';

        cxt.moveTo(0,cw/2);

        cxt.lineTo(0,-(0.8*R - cw*2));

        cxt.stroke();

        cxt.restore();

    }

    function draw(){

        cxt.clearRect(0,0,W,H);

        drawStatics();

        var now = new Date();

        drawHour(now.getHours(),now.getMinutes());

        drawMinute(now.getMinutes(),now.getSeconds());

        drawSecond(now.getSeconds());

        drawDot();

    }

    draw();

    setInterval(draw,500);

}

</script>

</body>

</html>

canvas自适应圆形时钟绘制的更多相关文章

  1. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  2. js绘制圆形时钟

    纯js制作圆形时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  4. canvas做的时钟，学习下

    canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上下文对象. getContext(" ...

  5. circle_clock 简单canvas实现圆弧时钟

    渣渣成品图:http://codepen.io/thewindswor... 最近对于圆形有种特别的感情呢...因为写了个cricle_process_bar就像到了用来做时钟大概会比较有趣吧,所以就 ...

  6. HTML5之Canvas画圆形

    HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...

  7. canvas动画—圆形扩散、运动轨迹

    介绍 在ECharts中看到过这种圆形扩散效果,类似css3,刚好项目中想把它用上,but我又不想引入整个echart.js文件,更重要的是想弄明白它的原理,所以自己动手.在这篇文章中我们就来分析实现 ...

  8. jQuery ClockPicker 圆形时钟

    ClockPicker.js是一款时钟插件,其实还可以改进,里面的分可以改成短横线. 在线实例 实例预览  jQuery ClockPicker 圆形时钟 使用方法 <div class=&qu ...

  9. Canvas：橡皮筋线条绘制

    Canvas:橡皮筋线条绘制 效果演示 实现要点 事件监听 [说明]: 在Canvas中检测鼠标事件是非常简单的,可以在canvas中添加一个事件监听器,当事件发生时,浏览器就会调用这个监听器. 我们 ...

随机推荐

  1. PhysicsBasedAnimation学习记录

    一.前言 1.概述 Google I/O'17推出了许多新的特性,在动画这一块又有新的API供开发者使用,在动画API中引入了DynamicAnimation,开发者可以使用新的API创建更加动态化的 ...

  2. 改进log4go的一些设想

    log4go 的 4.0.2 版本(https://github.com/ccpaging/log4go/tree/4.0.2)发布以后, 看了看别的 go 语言日志文件设计.发现了一篇好文: log ...

  3. Java版 QQ空间自动登录无需拷贝cookie一天抓取30WQQ说说数据&流程分析

    QQ空间说说抓取难度比较大,花了一个星期才研究清楚! 代码请移步到GitHub GitHub地址:https://github.com/20100507/Qzone [没有加入多线程,希望你可以参与进 ...

  4. 20170713_filter/sort

    js:filter过滤数组元素 //1.数组取奇数 var arr = [1,2,3,4,5]; var r = arr.filter(function(x){ return x % 2 !== 0; ...

  5. fzu 2257 saya的小熊饼干

    https://vjudge.net/problem/FZU-2257 题意:略 思路: 看题解补的题.正难则反的思想求概率. 首先,由于各维数之间是独立的.所以以x为例.首先,计算可以取到(i,j) ...

  6. [肯定不知道]PeopleSoft中PSADMIN你不知道的秘密

    PeopleSoft psadmin工具是用于管理PS App server,process scheduler 和 web server节点的.可以使用一些设置菜单选项来管理或配置上面提到的任何组件 ...

  7. vue-cli的webpack模板项目配置文件分析

    由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修 ...

  8. wamp+python+CGI+wingIDE

    一.环境配置情况 windows7 32位 wamp​2.5 python3.5.2 wingIDE​5.1.12 上述软件下载安装按照自己的意愿行事. 二.​配置 wamp支持cgi和python: ...

  9. hdu 6047 Maximum Sequence（贪心）

    Description Steph is extremely obsessed with "sequence problems" that are usually seen on ...

  10. Hibernate批量操作（一）

    在项目的开发过程之中,我们常会遇到数据的批量处理问题.在持久层采用Hibernate框架时,在进行批量操作时,需要考虑Hibernate实现机制带来的一些问题. 我们知道在每个Hibernate Se ...