使用html5画一个时钟表

效果图

这里写图片描述
时钟是可以动态显示的，因为是截图，所以看不出秒针、分针的动态

1.主体代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>时钟</title>
 </head>

    <style type="text/css">
        div{
            text-align:center;
            margin-top:250px;
        }
        #clock{
            /*边框主要为了，前期方便绘画，后期可以自行清楚*/
            border:1px solid #ccc;
        }
    </style>


 <body>

    <div>
        <canvas id="clock" height="300px" width="300px"></canvas>
    </div>

    <script type="text/javascript">
        //下面所有的javascript代码都写在这里的哟
    </script>
 </body>
</html>

2.画背景：最外层的圆、数字、以及秒刻度的点

var dom = document.getElementById("clock");
var ctx = dom.getContext("2d");
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;

function drawBackgroundCircle(){
    //画最外层的圆
    ctx.translate(r,r);
    ctx.lineWidth = 6;
    ctx.beginPath();
    ctx.arc(0,0,r - 3,0,2*Math.PI,false);
    ctx.closePath();
    ctx.stroke();

    //canvas画圆的起始点是 3点钟的方向，并且顺时针，所以数组从3开始
    var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
    ctx.font = '18px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    hourNumbers.forEach(function(number,i){
        var rad = 2*Math.PI/12*i;
        var x = (r - 30)*Math.cos(rad);
        var y = (r - 30)*Math.sin(rad);
        ctx.fillText(number,x,y);
    });
    //画数字和最外层中间的秒刻度点
    for(var i = 0;i<60;i++){
        var rad = 2*Math.PI/60*i;
        var x = (r - 13)*Math.cos(rad);
        var y = (r - 13)*Math.sin(rad);
        ctx.beginPath();
        if(i%5===0){
            ctx.fillStyle = '#a00';
            ctx.arc(x,y,4,0,2*Math.PI,false);
        }else{
            ctx.fillStyle = '#ccc';
            ctx.arc(x,y,2,0,2*Math.PI,false);
        }
        ctx.closePath();
        ctx.fill();
    }
}

3.画时针线

function drawHourBar(hours,minutes){
    //计算出时针线的弧度
    var rad = 2*Math.PI/12*hours + Math.PI/6*minutes/60;
    ctx.save();
    ctx.rotate(rad);
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.lineCap="round";
    ctx.moveTo(0,13);
    ctx.lineTo(0,-r/2);
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
}

4.画分针线


function drawMinuteBar(minutes){
    var rad = 2*Math.PI/60*minutes;
    ctx.save();
    ctx.rotate(rad);
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.lineCap="round";
    ctx.moveTo(0,14);
    ctx.lineTo(0,-r + 39);
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
}

5.画秒针线

    //基本类似上面 分针线的画法
function drawSecondBar(seconds){
    var rad = 2*Math.PI/60*seconds;
    ctx.save();
    ctx.rotate(rad);
    ctx.strokeStyle="#a00";
    ctx.lineWidth = 3;
    //ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.lineCap="round";
    ctx.moveTo(0,14);
    ctx.lineTo(0,-r + 21);
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
}

6.画原点

function drawDot(){
    ctx.beginPath();
    ctx.fillStyle = '#a00';
    ctx.arc(0,0,6,0,2*Math.PI,false);//画出圆心
    ctx.closePath();
    ctx.fill();
}

7.封装上面的函数，并调用，将时钟表绘制出来

function drawAll(){
    //清楚上一秒的动作
    ctx.clearRect(0,0,width,height);
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    ctx.save();
    drawBackgroundCircle();//此处多次重绘不必要的背景，可改进
    drawHourBar(hours,minutes);
    drawMinuteBar(minutes);
    drawSecondBar(seconds);
    drawDot();
    ctx.restore();
}
//调用所有函数
drawAll();
//设置定时器
setInterval(drawAll,1000);

8.整体代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>时钟</title>
 </head>

    <style type="text/css">
        div{
            text-align:center;
            margin-top:250px;
        }
        #clock{
            border:1px solid #ccc;
        }
    </style>


 <body>

    <div>
        <canvas id="clock" height="300px" width="300px"></canvas>
    </div>

    <script type="text/javascript">
        var dom = document.getElementById("clock");
        var ctx = dom.getContext("2d");
        var width = ctx.canvas.width;
        var height = ctx.canvas.height;
        var r = width / 2;

        function drawBackgroundCircle(){
            ctx.translate(r,r);
            ctx.lineWidth = 6;
            ctx.beginPath();
            ctx.arc(0,0,r - 3,0,2*Math.PI,false);
            ctx.closePath();
            ctx.stroke();

            var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
            ctx.font = '18px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            hourNumbers.forEach(function(number,i){
                var rad = 2*Math.PI/12*i;
                var x = (r - 30)*Math.cos(rad);
                var y = (r - 30)*Math.sin(rad);
                ctx.fillText(number,x,y);
            });

            for(var i = 0;i<60;i++){
                var rad = 2*Math.PI/60*i;
                var x = (r - 13)*Math.cos(rad);
                var y = (r - 13)*Math.sin(rad);
                ctx.beginPath();
                if(i%5===0){
                    ctx.fillStyle = '#a00';
                    ctx.arc(x,y,4,0,2*Math.PI,false);
                }else{
                    ctx.fillStyle = '#ccc';
                    ctx.arc(x,y,2,0,2*Math.PI,false);
                }
                ctx.closePath();
                ctx.fill();
            }
        }

        function drawHourBar(hours,minutes){
            var rad = 2*Math.PI/12*hours + Math.PI/6*minutes/60;
            ctx.save();
            ctx.rotate(rad);
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.lineCap="round";
            ctx.moveTo(0,13);
            ctx.lineTo(0,-r/2);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
        }

        function drawMinuteBar(minutes){
            var rad = 2*Math.PI/60*minutes;
            ctx.save();
            ctx.rotate(rad);
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.lineCap="round";
            ctx.moveTo(0,14);
            ctx.lineTo(0,-r + 39);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
        }

        function drawSecondBar(seconds){
            var rad = 2*Math.PI/60*seconds;
            ctx.save();
            ctx.rotate(rad);
            ctx.strokeStyle="#a00";
            ctx.lineWidth = 3;
            //ctx.lineCap = 'round';
            ctx.beginPath();
            ctx.lineCap="round";
            ctx.moveTo(0,14);
            ctx.lineTo(0,-r + 21);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
        }

        function drawDot(){
            ctx.beginPath();
            ctx.fillStyle = '#a00';
            ctx.arc(0,0,6,0,2*Math.PI,false);//画出圆心
            ctx.closePath();
            ctx.fill();
        }

        function drawAll(){
            ctx.clearRect(0,0,width,height);
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            ctx.save();
            drawBackgroundCircle();//此处多次重绘不必要的背景，可改进
            drawHourBar(hours,minutes);
            drawMinuteBar(minutes);
            drawSecondBar(seconds);
            drawDot();
            ctx.restore();
        }
        drawAll();
        setInterval(drawAll,1000);
    </script>
 </body>
</html>

使用html5画一个时钟表

效果图

1.主体代码

2.画背景：最外层的圆、数字、以及秒刻度的点

3.画 时针线

4.画 分针线

5.画 秒针线

6.画 原点

7.封装上面的函数，并调用，将时钟表绘制出来

8.整体代码

猜你喜欢

3.画时针线

4.画分针线

5.画秒针线

6.画原点