关闭

HTML5 用canvas制作时钟的方法

标签: canvas时钟
538人阅读 评论(0) 收藏 举报
分类:

用canvas制作漂亮的时钟

需求如下:

这里写图片描述

一:分析项目?

  • 分析时钟的组成;
  • 分析需要的canvas技术;
  • 代码实现;
  • 美化效果。

二:时钟组成?

  • 表盘(橙色)
  • 刻度(黑色)
  • 时针(黑色)
  • 分针(黑色)
  • 秒针(橙色)
  • 表盘中心样式(中心径向渐变)
  • 秒针头部样式(圆圈嵌套)

三:分析需要的canvas技术?

基础知识需要自己看,此项目需要必须理解并且掌握的东西有:

  • 画表盘:绘制圆的路径技术,cxt.arc(6个参数);
  • 绘制文本:即表盘上面的数字,会使用cxt.font、cxt.textAlign、cxt.textBaseline和cxt.fillTExt等绘制文本属性;
  • 变换方法:rotate();
  • 重新规定原点的方法:translate(x,y)
  • 保存上文环境和输出上文环境方法的方法:save()和restore(),这两个方法一定要理解
    代码如下所示:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>clock</title>
        <style media="screen">
            #clock{background: #636051;}
        </style>
    </head>
    <body>
        <canvas id="clock" width="500" height="500">
            您的浏览器不支持canvas
        </canvas>
    </body>
    <script type="text/javascript">
        var clock = document.getElementById('clock');
        var cxt = clock.getContext('2d');
        function drawClock(){
            var now = new Date();
            var hours = now.getHours();
            var minute = now.getMinutes();
            var sec = now.getSeconds();
            //转换24小时进制转换为12小时进制
            hours = hours>12 ? hours-12 : hours;
            //画图之前先清除画布
            cxt.clearRect(0,0,500,500)
            //设置原点
            cxt.translate(250,250);
            //表盘(蓝色)
            cxt.lineWidth = 20;
            cxt.strokeStyle = "#D78203";
            cxt.fillStyle = "#EDEAE3";
            cxt.beginPath();
            cxt.arc(0,0,200,0,2*Math.PI,false);
            cxt.stroke();
            cxt.fill();
            cxt.closePath();
            //刻度样式
            var hour = [12,1,2,3,4,5,6,7,8,9,10,11];
            for(var i=0; i<60; i++){
                if(i%5 == 0){
                    cxt.save();
                    //填入小时的字体
                    var x = 160 * Math.cos((i/5*30-90)*Math.PI/180);
                    var y = 160 * Math.sin((i/5*30-90)*Math.PI/180);
                    cxt.font = "bold 18px Arial";
                    cxt.fillStyle = "#000";
                    cxt.textAlign = "center";
                    cxt.textBaseline = "middle";
                    cxt.fillText(hour[i/5],x,y);
                    //小时的刻度标识
                    cxt.lineWidth = 8;
                    cxt.strokeStyle = "#000";
                    cxt.rotate(i*30*Math.PI/180);
                    cxt.beginPath();
                    cxt.moveTo(0,-170);
                    cxt.lineTo(0,-190);
                    cxt.closePath();
                    cxt.stroke();
                    cxt.restore();
                }else{
                    cxt.save();
                    cxt.lineWidth = 5;
                    cxt.strokeStyle = "#000";
                    cxt.rotate(i*6*Math.PI/180);
                    cxt.beginPath();
                    cxt.moveTo(0,-180);
                    cxt.lineTo(0,-190);
                    cxt.stroke();
                    cxt.closePath();
                    cxt.restore();
                }
            }
            //时针样式
            cxt.save();
            cxt.lineWidth = 10;
            cxt.strokeStyle = "#000";
            cxt.rotate((hours + minute/60) * 30 * Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,15);
            cxt.lineTo(0,-80);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
            //分针
            cxt.save();
            cxt.lineWidth = 7;
            cxt.strokeStyle = "#000";
            cxt.rotate((minute + sec/60)*6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,20);
            cxt.lineTo(0,-130);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
            //秒针
            cxt.save();
            cxt.lineWidth = 5;
            cxt.strokeStyle = "#D78203";
            cxt.rotate(sec*6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,25);
            cxt.lineTo(0,-160);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
            //中心的圆圈
            cxt.beginPath();
            var gradient = cxt.createRadialGradient(0,0,1,0,0,6);
            gradient.addColorStop(0,"#fff");
            gradient.addColorStop(1,"#615942");
            cxt.fillStyle = gradient;
            cxt.arc(0,0,7,0,2*Math.PI,false);
            cxt.fill();
            cxt.closePath();
            //边缘中心的圆圈
            cxt.save();
            cxt.fillStyle = "#D78203";
            cxt.rotate(sec*6*Math.PI/180);
            cxt.beginPath();
            cxt.arc(0,-125,8,0,2*Math.PI,false);
            cxt.fill();
            cxt.closePath();
            cxt.restore();
            //镂空秒针头部的圆圈
            cxt.save();
            cxt.fillStyle = "#fff";
            cxt.rotate(sec*6*Math.PI/180);
            cxt.beginPath();
            cxt.arc(0,-125,4,0,2*Math.PI,false);
            cxt.fill();
            cxt.closePath();
            cxt.restore();

            //还原原点
            cxt.translate(-250,-250);
        }
        setInterval(drawClock,1000);
    </script>
</html>
1
0
查看评论

利用canvas绘制一个简单时钟

首先在主页面中构建基本框架,其实只有一个时钟也没有什么框架啦 canvas clock div{ text-align: center; margin-top: 250px; } #clock{ border: 1px solid #ccc; } ...
  • tian_123456789
  • tian_123456789
  • 2016-11-18 20:22
  • 994

玩转html5(四)----使用canvas画一个时钟(可以动的哦!)

先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: 您的浏览器不支持canvas //获取画布 var clock=document.getEl...
  • u012116457
  • u012116457
  • 2014-04-29 20:56
  • 6218

HTML5---canvas 指针时钟-clock

anvas 指针时钟-clock
  • damys
  • damys
  • 2015-08-20 10:33
  • 3565

html5之canvas实现模拟简易时钟

个人理解: moveTo 类似于提笔去另一个新地方 translate类似于把整张画布移位 如果画一条新路径不使用beginPath(),择stroke()会把之前画过的(即已经执行的stroke()重新再画一遍,相当于描粗了) 画背景的函数中不能使用stroke(),因为画时分秒是基于开始...
  • normol
  • normol
  • 2016-10-26 20:17
  • 891

HTMl5与CSS3两种制作时钟的方法

1.      今天用canvas做了一个时钟,想起之前用JS也做过一个,所以把两个的代码个贴上来。 代码如下:               ...
  • CharlesK6
  • CharlesK6
  • 2017-06-14 22:29
  • 244

canvas绘制精细走动时钟

这里简单了利用canvas做了一个时钟,能够实现分针和时针较精确的走动,没有太多难点,重点的是要实现分针和时针走动,角度的计算,笔者在下面进行说明。先看效果图: 颜色单配的比较难看,读者谅解。请看代码:<!DOCTYPE html> <html> <hea...
  • zhongguohaoshaonian
  • zhongguohaoshaonian
  • 2016-11-16 21:53
  • 1851

HTML5 之 Canvas (案例)

**星星闪动动画** 1、如何轮播一张图片上的序列帧 2、canvas的几个主要绘图API:drawImage()、save()、restore()。 3、如何处理鼠标事件 笔记: Window API: 循环调用三种方法: requestAnimFrame(fcuntion(){}...
  • Hourglass314
  • Hourglass314
  • 2017-02-20 12:38
  • 286

创建HTML5 LOGO,Canvas绘图

使用html5的canvas 画图比直接使用图片有一个很大的优点就是节省空间,一张90kb大的图片,如果使用代码来画的话只需要4kb,类似于矢量图。 HTML5 Logo footer {display:block; border-top: 1px solid orange;...
  • zdw890412
  • zdw890412
  • 2012-07-10 16:56
  • 1600

五步教你制作漂亮精致的HTML时钟

学了一段时间的HTML、CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图: 涉及到的知识点有: CSS3动画、DOM操作、定时器、圆点坐标的计算(好多人是不是已经还给自己的老师了~)   1、准备HTML 首先,我们需要准备HTML结构,背景、表盘、指...
  • qq_40041074
  • qq_40041074
  • 2017-11-17 17:31
  • 277

html5 的 canvas 想写个小项目 画板

最近在研究下 html5 的 canvas 想写个小项目,练练手,结果写了一个画图板,功能点有 绘制、直线、圆、方形、涂鸦、线条粗细、颜色切换、撤销、回退、保存、下载、外部图片拖入等 , 用的技术是包含 html5 中的本地存储、下载、canvas 等技术,上图。 演示地址:h...
  • qq253113827
  • qq253113827
  • 2014-05-23 23:35
  • 2043
    个人资料
    • 访问:82330次
    • 积分:1648
    • 等级:
    • 排名:千里之外
    • 原创:74篇
    • 转载:11篇
    • 译文:0篇
    • 评论:14条
    最新评论