码迷,mamicode.com
首页 > 其他好文 > 详细

H5之canvas-绘制动态时钟

时间:2019-08-10 09:30:57      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:width   顺时针   知识   系统   math   image   get   cti   class   

使用<canvas>元素不是非常难,但需要一些基本的HTML和JavaScript知识。

今天我们来利用canvas API绘制一个时钟,先上图:

技术图片

 

画图之前,先把思路捋一遍:首先分解一下这个时钟的图形,它是由表盘(圆形)和指针(直线)组成。

canvas中圆形与矩形差距很大,canvas并没有提供专门绘制圆形的方法,但可以绘制圆弧,将圆弧首尾相连得到圆形

arc( x , y , radius , 起始弧度 , 结束弧度 , 旋转方向)
x,y --- 圆心坐标
radius --- 半径
弧度和角度的关系 --- 弧度 = 角度*Math.PI/180
例:2π是360°(完整的圆形)
旋转方向 --- true:逆时针;false:顺时针(默认)

掌握画圆大法后,就可以着手施工了:

首先准备好画布

<canvas id="myClock" width="500" height="500"></canvas>

接着获取上下文对象

var canvas = document.getElementById(‘myClock‘);
var con = canvas.getContext(‘2d‘);

分解功能:

1.表盘上的刻度(60个表示秒的刻度,12个表示小时的刻度)

1.1 60个秒刻度-->360°/60-->6°一个小格

//定义原点和半径
var x = 250;
var y = 250;
var r = 150;
con.moveTo(x,y);       
con.arc(x,y,r,0,6*Math.PI/180);
con.moveTo(x,y);
con.arc(x,y,r,6*Math.PI/180,12*Math.PI/180);
con.stroke();
……

先来做个小实验,以上代码片段将会得到这个图形

技术图片

 

利用循环,将以上代码完善

//定义原点和半径
var x = 250;
var y = 250;
var r = 150;
//绘制秒刻度开始
con.beginPath();//为了不影响其他绘图,加上起始路径
for (var i = 0; i < 60; i++) {
    con.moveTo(x, y); //以圆心为起点
    con.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180);//绘制一段6°的圆弧
}
con.closePath(); //为了不影响其他绘图,加上起始路径
con.stroke(); 

此刻,得到如下图形

技术图片

 

怎么看怎么不像表盘咧?!为了达到秒刻度的效果,只需在上面覆盖一个较小的白色实心圆形即可

//较小的白色圆盘
con.beginPath();
con.moveTo(x,y);
con.arc(x,y,0.95*r,0,2*Math.PI);
con.closePath();
con.fillStyle = ‘#fff‘;//填充图形背景色
con.fill(); //实心圆

技术图片

现在看上去,表盘的雏形算是出来了。

同样的步骤,将小时刻度也画出来,为了区分小时刻度和秒刻度,可以加粗小时刻度的线条

1.2 12个小时刻度-->360°/12-->30°一个大格

con.beginPath();//为了不影响其他绘图,加上起始路径
con.lineWidth = 4; //加粗小时刻度
for(var i = 0;i<12;i++){
    con.moveTo(x,y);
    con.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180);
}
con.closePath(); //为了不影响其他绘图,加上起始路径
con.stroke();

技术图片

最后,再叠加一个较小的白色实心圆心,表盘就画完了(最难的部分也搞定了)

con.fillStyle = ‘#fff‘;
con.beginPath();
con.moveTo(x, y);
con.arc(x, y, 0.85 * r, 0, 2 * Math.PI);
con.closePath();
con.fill();

技术图片

 总得来说,画表盘就和化妆一样,需要层层叠加

2.时、分、秒针

//注意:考虑到针要以圆心为中心旋转
con.lineWidth = 5; //定义时针线条的宽度
con.beginPath();
con.moveTo(x,y); //还是以圆心为起点
con.arc(x,y,0.5*r,0,0);//此处半径即时针的长度
con.closePath();
con.stroke();

分针和秒针就不做赘述,修改lineWidth的值和圆弧的半径即可

技术图片

 

3.让时钟走起来

如何让秒针隔一秒动一下呢?是不是很快想到这个方法--->setInterval()

……
//获取当前系统时间
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
//时针对应的弧度
var hhVal = (-90 + hh * 30 + mm / 2)*Math.PI/180;
//-90:canvas画圆的起始点在表盘的3个字,而时钟的起始点应在12个字。+mm/2:时针不会一直只在整点的位置,分针走30分钟,时针多走15°
var mmVal = (-90 + mm * 6) * Math.PI / 180;
var ssVal = (-90 + ss * 6) * Math.PI / 180;
……
con.arc(x, y, 0.5 * r, hhVal, hhVal);
……
//调用函数
setInterval(toDraw, 1000);

组合好代码后,时钟就能走起来了:(^-^)V

奉上完整代码:

HTML部分

<canvas id="myClock" width="500" height="500"></canvas>
<p id="showDate"></p>

JavaScript部分

        window.onload = function () {
            //获取上下文对象
            var canvas = document.getElementById(‘myClock‘);
            var con = canvas.getContext(‘2d‘);
            //自定义函数---画表盘,针
            function toDraw() {
                //定义原点和半径
                var x = 250;
                var y = 250;
                var r = 150;
                //绘制秒刻度开始
                con.beginPath();
                for (var i = 0; i < 60; i++) {
                    con.moveTo(x, y);//以圆心为起点
                    con.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180);//绘制一段6°的圆弧
                }
                con.closePath(); //为了不影响其他绘图,加上起始路径
                con.stroke();
                //较小的白色圆盘
                con.fillStyle = ‘#fff‘;
                con.beginPath();
                con.moveTo(x, y);
                con.arc(x, y, 0.95 * r, 0, 2 * Math.PI);
                con.closePath();
                con.fill(); //实心圆
                //绘制秒刻度结束
                //同理绘制小时刻度
                con.beginPath();
                con.lineWidth = 4; //加粗小时刻度
                for (var i = 0; i < 12; i++) {
                    con.moveTo(x, y);
                    con.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180);
                }
                con.closePath(); //为了不影响其他绘图,加上起始路径
                con.stroke();
                //较小的白色圆盘
                con.fillStyle = ‘#fff‘;
                con.beginPath();
                con.moveTo(x, y);
                con.arc(x, y, 0.85 * r, 0, 2 * Math.PI);
                con.closePath();
                con.fill();
                //绘制小时刻度结束

                //获取当前系统时间
                var today = new Date();
                var hh = today.getHours();
                var mm = today.getMinutes();
                var ss = today.getSeconds();
                document.getElementById(‘showDate‘).innerHTML = hh+‘:‘+mm+‘:‘+ss;
                //时针对应的弧度
                var hhVal = (-90 + hh * 30 + mm / 2) * Math.PI / 180;
                var mmVal = (-90 + mm * 6) * Math.PI / 180;
                var ssVal = (-90 + ss * 6) * Math.PI / 180;
                //开始绘制时、分、秒针(注意:考虑到针要以原点为中心旋转)
                con.lineWidth = 5; //时针
                con.beginPath();
                con.moveTo(x, y);
                con.arc(x, y, 0.5 * r, hhVal, hhVal);
                con.closePath();
                con.stroke();
                con.lineWidth = 3; //分针
                con.beginPath();
                con.moveTo(x, y);
                con.arc(x, y, 0.65 * r, mmVal, mmVal);
                con.closePath();
                con.stroke();
                con.lineWidth = 1; //秒针
                con.beginPath();
                con.moveTo(x, y);
                con.arc(x, y, 0.8 * r, ssVal, ssVal);
                con.closePath();
                con.stroke();
            }
            //每隔1秒调用一次函数
            setInterval(toDraw, 1000);
        }    

 

H5之canvas-绘制动态时钟

标签:width   顺时针   知识   系统   math   image   get   cti   class   

原文地址:https://www.cnblogs.com/laoli-note/p/11330332.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!