关闭

HTML5 用canvas制作时钟的方法

标签: canvas时钟
404人阅读 评论(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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:59454次
    • 积分:1414
    • 等级:
    • 排名:千里之外
    • 原创:74篇
    • 转载:11篇
    • 译文:0篇
    • 评论:13条
    最新评论