前面的话

　　前面介绍过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. TP3.2写提交的验证码验证

    把今天掌握的东西整理一下,要不然,我就忘干净了: 今天在做一个企业网站的时候,有一个在线留言的功能,最后提交的时候需要输入验证码.如图下: 当然,特连接的并不是我的后台 好了,开始了,首先我需要把验证 ...

  2. Oracle 10gR2分析函数

    Oracle 10gR2分析函数汇总 (Translated By caizhuoyi 2008‐9‐19) 说明:  1. 原文中底色为黄的部分翻译存在商榷之处,请大家踊跃提意见:  2. 原文中淡 ...

  3. DOM事件代码小结

    以下代码出自<DOM Enlightenment>一书1.三种事件形式 <body onclick="alert('触发内联属性事件')"> <div ...

  4. 机器学习 —— 基础整理（五）线性回归；二项Logistic回归；Softmax回归及其梯度推导；广义线性模型

    本文简单整理了以下内容: (一)线性回归 (二)二分类:二项Logistic回归 (三)多分类:Softmax回归 (四)广义线性模型 闲话:二项Logistic回归是我去年入门机器学习时学的第一个模 ...

  5. Spring boot——logback 基础使用篇（一）

    1 简单日志配置 spring boot内部使用Commons Logging来记录日志,但也保留外部接口可以让一些日志框架来进行实现,例如Java Util Logging,Log4J2还有Logb ...

  6. 关于解决mysql数据库乱码的问题

    最近在开发的过程中频繁的使用到了mysql'这款数据库,mysql的中文乱码问题一直让人头疼.以前遇到过几次,但是都一不小心就解决了,这次终于明白到底是怎么回事了.可能我下面手的这种解决方案只适合于我 ...

  7. 初学Python（七）——控制语句

    初学Python(七)——控制语句 初学Python,主要整理一些学习到的知识点,这次是控制语句. if : #-*- coding:utf-8 -*- age=raw_input('input yo ...

  8. Charles录制App的接口har文件

    Charles录制App的接口har文件 如果我们想录制我们自己App后台请求接口的信息,并生成har文件,要怎么做呢?其实很简单,就是通过Charles,让手机的访问请求走这个Charles代理就行 ...

  9. spring-boot整合mybatis(1)

    sprig-boot是一个微服务架构,加快了spring工程快速开发,以及简便了配置.接下来开始spring-boot与mybatis的整合. 1.创建一个maven工程命名为spring-boot- ...

  10. 小程序server-3-搭建WebSocket 服务

    小程序server-3-搭建WebSocket 服务: 1.安装 Node 模块 使用 ws 模块来在服务器上支持 WebSocket 协议,下面使用 NPM 来安装: cd /var/www/wxp ...