H5之canvas-绘制动态时钟

使用<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);
        }    

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

时间: 2024-11-05 13:48:54

H5之canvas-绘制动态时钟的相关文章

应用canvas绘制动态时钟--每秒自动动态更新时间

使用canvas绘制时钟 下文是部分代码,完整代码参照:https://github.com/lemoncool/canvas-clock,可直接下载. 首先看一下效果图:每隔一秒会动态更新时间 一.前期准备 1. HTML中准备一个容器存放画布,并为其设置width,height. <div> <canvas id="clock" height="200px" width="200px"></canvas>

h5+canvas绘制动画时钟

h5+canvas绘制动画时钟 效果图,这个是截图,可以动的, 代码如下: <!DOCTYPE html><html><head><title>动画效果</title></head> <body> <canvas id="anm" width="600" height="600" style="border:1px solid gray"

使用canvas绘制动画时钟

一代码 <!DOCTYPE html > <head> <meta charset="UTF-8" > <title>绘制动态时钟</title> <script type="text/javascript"> var canvas; var context; function window_onload() { canvas = document.getElementById("ca

HTML5 Canvas绘制实时时钟

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>try to draw the colock</title> <script src="js/modernizr-1.7.js"></script> <script type="text/javascript"> wind

Android UI编程进阶——使用SurfaceViewt和Canvas实现动态时钟

概述: 很多时候我们想要自己写一些类似时钟.罗盘的控件,却又找不到合适的Demo.我想这时你可能索性就直接上图片了.在Android有Canvas和Paint这么好的画师的情况下,还是选择使用图片,的确是有一些尴尬了.下面我就利用一步一步实现自定义时钟来对这个问题做一个讲解.(注明:本人不太会制作GIF图片,以下图片均不能动态展示,想要查看动态效果,请转到博客末尾处下载源码进行查看) 错误示例: 这里我有一个"错误"的示例.这里的错误其实应该是要打上双引号的,因为它不是真的错误,只是在

使用canvas画动态时钟

使用到的知识: 1.     获取系统时间 2.     画图形,空心图形,实心图形,以及其它一些属性 3.     for循环 前期准备: a. HTML中准备一个容器存放画布,并为其设置width,height. <canvas id="myCanvas" width="500" height="400"></canvas> b.在js中获取canvas画布元素,并获得其上下文,对应的方法如下: var c = doc

canvas绘制指针时钟

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas时钟</title> </head> <body> <canvas id="c" width="300" height="300"></canv

用canvas绘制一个时钟

实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>时钟</title>    <style type="text/css">    

canvas之动态时钟

1 function showTime(){ 2 var can=document.getElementById("canvas"); 3 var c=can.getContext("2d");//定义2D画布 4 can.width="1000"; 5 can.height="600"; 6 //平移确定中心 7 c.translate(500,300); 8 //获取本地时间 9 var sum=new Date(); 1