基础canvas应用-钟表绘制

首先，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应用-钟表绘制的更多相关文章

canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表
制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...
基于canvas实现钟表
原理说明 1.通过arc方法实现钟表外环: 2.通过line实现钟表时针,分针,秒针和刻度标志的绘制,基于save和restore方法旋转画布绘制不同角度的指针: 3.通过font方法实现在画布上绘制 ...
-_-#【Canvas】导出在<canvas>元素上绘制的图像
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
Canvas 中drawImage 绘制不出图片
在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...
canvas教程(二) 绘制直线
经过 canvas 教程(一) 简介我们知道了 canvas 的一些基本情况而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线但是无论是直线还是曲线,我们 ...
canvas教程(三) 绘制曲线
经过 canvas 教程(二) 绘制直线我们知道了 canvas 的直线是怎么绘制的而本次是给大家带来曲线相关的绘制绘制圆形在 canvas 中我们可以使用 arc 方法画一个圆 contex ...
Android中使用Canvas和Paint绘制一个安卓机器人
场景在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...
Canvas基础——钟表绘制
首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...
Canvas 旋转风车绘制
写在前面: 亲爱的朋友们大家好,鄙人自学前端,第一次写博客,写的不好的地方,烦请同学们谅解,如果本文对你有一丁点帮助,还请劳驾您给我点个赞,您的认可将是我坚持下去的强大动力!谢谢! 在进行教学之前 ...

随机推荐

C# - 系统类 - DateTime类
DateTime类 ns:System 此类是一个结构提供了访问和修改它所代表的时间创建DateTime实例的几种方式 DateTime time = , , , , , ); Console.W ...
动作-CCActionInterval之CCAnimation&CCAnimate
动画简单实例 v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#def ...
JS中checkbox组件的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
深入理解计算机系统第二版习题解答CSAPP 2.9
基于三元色R(红)G(绿)B(蓝)关闭(0)和打开(1),能够创建8种不同的颜色,如下: R G B 颜色 R G B 颜色 0 0 0 黑色 1 0 0 红色 0 0 1 蓝色 1 0 1 红紫色 ...
JavaScript入门(4)
一.JS能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登录验证等) 什么是变量?http://www.cnblogs.c ...
SWFObject2.0
PROBLEM: using % in the height and width(e.g. 100%) with the SWFObject 2.0 (or 2.1) with dynamic pub ...
C#的类型、变量和值
大学学了C#,工作也是使用C#,虽然在日常的开发中没什么大的问题,但个人觉得在C#的理解还不是很清晰,所以决定花一定的时间来理一理学过的知识,顺便革新下脑袋里的知识,因为坑爹的学校在教.net的时候, ...
group by order by having
java中判断Object对象类型
记录一下 Object param = params.get(i); if (param instanceof Integer) { int value = ((Integer) param).int ...
C# 操作数据库的几种方式(数据库使用SQL SERVER2008)
一:通过常规 T-SQL 语句 (只写删除操作,其他同理) string strConn = ConfigurationManager.ConnectionStrings["SiteConn ...

基础canvas应用-钟表绘制

基础canvas应用-钟表绘制的更多相关文章

随机推荐

热门专题