首先，canvas语法基础薄弱的小伙伴请点这里，剩下的小伙伴们可以接着往下看了。

一个表，需要画什么出来呢：3条线（时分秒针），1个圆（表盘），以及60条短线/点（刻度）。

嗯，没毛病。

那接下来让我们考虑点细节：一个圆，自然是360°，分成60个刻度，两个刻度之间相隔6°，然后分针和秒针刻度偏移是相同的，时针的刻度偏移应该是它们的5倍（只有12个小时刻度）=30°，然而你见过时分秒针一样长的表么？（我反正没有）所以我们还需要控制它们的长度是不一样的才对。

咳，有了上面的思考作为基础了，开搞。

先定个点画个圆：

            var canvas = document.getElementById('myCanvas');

            var ctx = canvas.getContext('2d');

            ctx.beginPath();

            ctx.arc(X坐标, Y坐标, 半径, 0, 2 * Math.PI, false);

            ctx.strokeStyle = 随便填颜色;

            ctx.stroke();

            ctx.closePath();

接下来我们要打上时间刻度，可是问题来了：你是可以画出来一个圆，也知道每个刻度6°角，可如何在画出来的圆上找到对应的坐标呢？

don't worry（数学知识过关的小伙伴们表示毫无压力）~我们只需要去算出正余弦就拿到了对应的XY坐标啦（是的，脚本内正余弦算法不是算角度），具体做法如下：

        //计算圆上每个点的坐标

        ///[a]角度[i]刻度[ox]圆心X坐标[oy]圆心Y坐标[or]圆半径

        function angle(a, i, ox, oy, or) {

            var hudu = (2 * Math.PI / 360) * a * i;//求出弧度

            var x = ox + Math.sin(hudu) * or;//计算出x轴坐标for正弦

            var y = oy - Math.cos(hudu) * or;//计算出y轴坐标for余弦

            return x + '_' + y;

        }

到了这里，我们就可以愉快的画刻度了：

            //打上文字（仅小时）

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

                var textXY = angle(30, i + 1, ox, oy, or - 10);//小时刻度坐标

                ctx.fillText(i + 1, textXY.split('_')[0], textXY.split('_')[1]);

                ctx.textAlign = 'center';//水平居中

                ctx.textBaseline = 'middle';//垂直居中

            }

            //打上分秒钟刻度

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

                var oXY = angle(6, i + 1, ox, oy, or);//分、秒刻度坐标

                ctx.beginPath();

                ctx.arc(oXY.split('_')[0], oXY.split('_')[1], (i + 1) % 5 == 0 ? 2 : 1, 0, 2 * Math.PI);

                ctx.fillStyle = 'blue';

                ctx.fill();

                ctx.closePath();

            }

　　　　　　　　

为了逼真，我还加入了秒针影响分针，分针影响秒针的计算。（见最后代码）

然后就是考虑三根针不一样长的问题，这个问题试过很多遍，最后我发现最简单的解决办法就是多画3个圆，因为偏移的角度计算方式是一样的。

最后的结果是这样的：

因为不支持上传html文件，所以我就把所有代码贴在这里了：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>小马的canvas练手作品-时钟</title>

    <meta charset="utf-8" />

</head>

<body>

    <canvas id="myCanvas" width="1000" height="1000">您的浏览器不支持此标签</canvas>

    <script type="text/javascript">

        setInterval('drawClock(150, 150, 100, 50, 70, 90,"pink","black","red","green")', 1000);

        //画钟表

        //[ox]圆心X坐标[oy]圆心Y坐标[or]钟表半径[hr]时针半径[mr]分针半径[sr]秒针半径[oc]钟表外环颜色[hc]时针颜色[mc]分针颜色[sc]秒针颜色

        function drawClock(ox, oy, or, hr, mr, sr, oc, hc, mc, sc) {

            //时钟底盘

            var canvas = document.getElementById('myCanvas');

            var ctx = canvas.getContext('2d');

            ctx.clearRect(ox - or, oy - or, or * 2, or * 2);//清空上一次绘制

            ctx.beginPath();

            ctx.arc(ox, oy, or, 0, 2 * Math.PI, false);

            ctx.strokeStyle = oc;

            ctx.stroke();

            ctx.closePath();

            //获取当前时间

            var NowTime = new Date();

            var h = NowTime.getHours();

            var m = NowTime.getMinutes();

            var s = NowTime.getSeconds();

            var y = NowTime.getFullYear();

            var mo = NowTime.getMonth() + 1;

            var d = NowTime.getDate();

            ctx.fillText(mo + '月' + d + '日', ox, oy - or / 2, 50);//显示月日

            //打上时间刻度

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

                var textXY = angle(30, i + 1, ox, oy, or - 10);//小时刻度坐标

                ctx.fillText(i + 1, textXY.split('_')[0], textXY.split('_')[1]);

                ctx.textAlign = 'center';//水平居中

                ctx.textBaseline = 'middle';//垂直居中

            }

            //打上分钟刻度

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

                var oXY = angle(6, i + 1, ox, oy, or);//分、秒刻度坐标

                ctx.beginPath();

                ctx.arc(oXY.split('_')[0], oXY.split('_')[1], (i + 1) % 5 == 0 ? 2 : 1, 0, 2 * Math.PI);

                ctx.fillStyle = 'blue';

                ctx.fill();

                ctx.closePath();

            }

            h = h + m / 60;//分钟影响时针偏移

            var hoursXY = angle(30, h > 12 ? h - 12 : h, ox, oy, hr);//时针终点XY坐标

            drawLine(ctx, hc, ox, oy, hoursXY.split('_')[0], hoursXY.split('_')[1]);

            m = m + s / 60;//秒钟影响分针偏移

            var minuteXY = angle(6, m, ox, oy, mr);//分针终点XY坐标

            drawLine(ctx, mc, ox, oy, minuteXY.split('_')[0], minuteXY.split('_')[1]);

            var secondXY = angle(6, s, ox, oy, sr);//秒针终点XY坐标

            drawLine(ctx, sc, ox, oy, secondXY.split('_')[0], secondXY.split('_')[1]);

        }

        //计算圆上每个点的坐标

        ///[a]角度[i]刻度[ox]圆心X坐标[oy]圆心Y坐标[or]圆半径

        function angle(a, i, ox, oy, or) {

            var hudu = (2 * Math.PI / 360) * a * i;//求出弧度

            var x = ox + Math.sin(hudu) * or;//计算出x轴坐标for正弦

            var y = oy - Math.cos(hudu) * or;//计算出y轴坐标for余弦

            return x + '_' + y;

        }

        //画线方法

        ///[ob]绘画对象[ox]圆心X坐标[oy]圆心Y坐标[px]目标X坐标[py]目标Y坐标

        function drawLine(ob, color, ox, oy, px, py) {

            ob.beginPath();

            ob.strokeStyle = color;

            ob.moveTo(ox, oy);

            ob.lineTo(px, py);

            ob.stroke();

            ob.closePath();

        }

    </script>

</body>

</html>

希望对大家有帮助~~

Canvas基础——钟表绘制的更多相关文章

  1. 基础canvas应用-钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

  2. canvas基础绘制-绚丽时钟

    效果图: 与canvas基础绘制-绚丽倒计时的代码差异: // var endTime = new Date();//const声明变量,不可修改,必须声明时赋值: // endTime.setTim ...

  3. canvas基础绘制-绚丽倒计时

    效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  5. canvas基础之旅

    canvas 主要使用2D rendering context  API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...

  6. canvas 基础知识整理（二）

    html部分: <canvas id="myCanvas" width="800" height="800" ></can ...

  7. canvas 基础知识整理（一）

    canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...

  8. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

  9. canvas 基础知识

    canvas 基础 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...

随机推荐

  1. DataTable定义

    DataTable是一个临时保存数据的网格虚拟表(表示内存中数据的一个表.).DataTable是ADO dot net 库中的核心对象.它可以被应用在 VB 和 ASP 上.它无须代码就可以简单的绑 ...

  2. 工具——SVN常用命令

    SVN一般都是团队合作做一个项目所需用到的,为了是版本的统一 ;1. Check out——从服务器端取得代码    把服务器资料库里存放的某个项目代码取出来,放到本地主机中,这个动作叫做“check ...

  3. SqlServer中临时表的应用

    一.变通处理WHERE后面IN的参数过多 WHERE后面的条IN操作符里的参数比较小时,可以直接使用IN(1,2,3)这样处理,当个数不确定(可能超过1000)时,应该考虑使用临时表关联查询: SEL ...

  4. 【BZOJ 1724】[Usaco2006 Nov]Fence Repair 切割木板 堆+贪心

    堆对于stl priority_queue ,我们自己定义的类自己重载<,对于非自定义类我们默认大根堆,如若改成小根堆则写成std::priority<int,vector<int& ...

  5. 常见编程语言对REPL支持情况小结

    最近跟一个朋友聊起编程语言的一些特性,他有个言论让我略有所思:“不能REPL的都是渣”.当然这个观点有点偏激,但我们可以探究一下,我们常用的编程语言里面,哪些支持REPL,哪些不支持,还有REPL的一 ...

  6. [hdu 2586]lca模板题（在线+离线两种版本）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2586 在线版本: 在线方法的思路很简单,就是倍增.一遍dfs得到每个节点的父亲,以及每个点的深度.然后 ...

  7. 马上给Meltdown和Spectre漏洞打补丁

    元旦之后的第一个工作日可谓是惊喜不断,4号就传来了 Google Project Zero 等团队和个人报告的 Meltdown 和 Spectre 内核漏洞的消息,首先简单介绍一下这两个内核漏洞. ...

  8. npm获取配置值的两种方式

    命令行标记 在命令行上放置--foo bar设置foo配置参数为bar. 一个 -- 参数(argument)告诉cli解析器停止读取flags.一个 在命令行结尾的--flag参数(paramete ...

  9. php多虚拟主机配置

    一.配置httpd.conf# Virtual hosts#Include conf/extra/httpd-vhosts.conf       //取消这一行的# 二.配置httpd-vhosts. ...

  10. 【bzoj3926- [Zjoi2015]诸神眷顾的幻想乡】广义sam

    题意:给定一棵树,每个节点有一个颜色,问树上有多少种子串(定义子串为某两个点上的路径),保证叶子节点数<=20.n<=10^5 题解: 叶子节点小于等于20,考虑将每个叶子节点作为根把树给 ...