分享个HTML5 canvas时钟的代码

来源：互联网发布：什么软件合成视频编辑：程序博客网时间：2024/04/30 08:02

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML CLOCK</title>
</head>
<body>
    <canvas width="500" height="500" id="clock">
        你的浏览器不支持canvas标签，时针显示不出来哦！
    </canvas>

    <script type="text/javascript">
    //画布背景颜色
    var clockBackGroundColor = "#ABCDEF";
    //时针颜色
    var hourPointColor = "#000";
    //时针粗细
    var hourPointWidth = 7;
    //时针长度
    var hourPointLength = 100;
    //分针颜色
    var minPointColor = "#000";
    //分针粗细
    var minPointWidth = 5;
    //分针长度
    var minPointLength = 150;
    //秒针颜色
    var secPointColor = "#F00";
    //秒针粗细
    var secPointWidth = 3;
    //秒针长度
    var secPointLength = 170;
    //表盘颜色
    var clockPanelColor = "#ABCDEF";
    //表盘刻度颜色
    var scaleColor = "#000";
    //表盘大刻度宽度 3 6 9 12
    var scaleBigWidth = 9;
    //表盘大刻度的长度
    var scaleBigLength = 15;
    //表盘小刻度的宽度
    var scaleSmallWidth = 5;
    //表盘小刻度的长度
    var scaleSmallLength = 10;
    //圆心颜色
    var centerColor = 'red';


    //时钟画布
    var clock = document.getElementById('clock');
    clock.style.background = clockBackGroundColor;
    //时针画布的作图环境（画板）
    var panel = clock.getContext('2d');


    //画线
    /**
    *画线段
    *
    *
    */
    function drowLine(p,width,color,startX,startY,endX,endY,ran,cX,cY){
        //保存传入的画板，相当于每次作画新开一个图层
        p.save();
        //设置画笔宽度
        p.lineWidth = width;
        //设置画笔颜色
        p.strokeStyle = color;
        //新开启作图路径，避免和之前画板上的内容产生干扰
        p.beginPath();
        p.translate(cX,cY);
        //旋转
        p.rotate(ran);
        //移动画笔到开始位置
        p.moveTo(startX,startY);
        //移动画笔到结束位置
        p.lineTo(endX,endY);
        //画线操作
        p.stroke();
        //关闭作图路径，避免和之后在画板上绘制的内容产生干扰
        p.closePath();
        //在传入的画板对象上覆盖图层
        p.restore();
    }
    /**
    *画水平线
    */
    function drowHorizontalLine(p,width,length,color,startX,startY,ran,cX,cY){
        drowLine(p,width,color,startX,startY,startX+length,startY,ran,cX,cY);
    }
    /**
    *画圈圈
    */
    function drowCircle(p,width,color,centreX,centreY,r){
        p.save();
        //设置画笔宽度
        p.lineWidth = width;
        //设置画笔颜色
        p.strokeStyle = color;
        //新开启作图路径，避免和之前画板上的内容产生干扰
        p.beginPath();
        //画圈圈
        p.arc(centreX,centreY,r,0,360,false);
        //画线操作
        p.stroke();
        //关闭作图路径，避免和之后在画板上绘制的内容产生干扰
        p.closePath();
        //在传入的画板对象上覆盖图层
        p.restore();
    }
    function drowPoint(p,width,color,centreX,centreY,r){
        p.save();
        //设置画笔宽度
        p.lineWidth = width;
        //设置画笔颜色
        p.fillStyle = color;
        //新开启作图路径，避免和之前画板上的内容产生干扰
        p.beginPath();
        //画圈圈
        p.arc(centreX,centreY,r,0,360,false);
        //画线操作
        p.fill();
        //关闭作图路径，避免和之后在画板上绘制的内容产生干扰
        p.closePath();
        //在传入的画板对象上覆盖图层
        p.restore();
    }
    function drowScales(p){
        //画小刻度
        for(var i = 0;i < 60;i++){
            drowHorizontalLine(p,scaleSmallWidth,scaleSmallLength,scaleColor,195-scaleSmallLength,0,i*6*Math.PI/180,250,250);
        }
        //画大刻度
        for(var i = 0;i < 12;i++){
            drowHorizontalLine(p,i%3==0?scaleBigWidth*1.2:scaleBigWidth,i%3==0?scaleBigLength*1.2:scaleBigLength,scaleColor,195-scaleBigLength,0,i*30*Math.PI/180,250,250);
            //可以添加数字刻度
        }
    }
    function drowHourPoint(p,hour){
        drowHorizontalLine(p,hourPointWidth,hourPointLength,hourPointColor,-10,0,(hour-3)*30*Math.PI/180,250,250);
    }
    function drowMinPoint(p,min){
        drowHorizontalLine(p,minPointWidth,minPointLength,minPointColor,-15,0,(min-15)*6*Math.PI/180,250,250);
    }
    function drowSecPoint(p,sec){
        drowHorizontalLine(p,secPointWidth,secPointLength,secPointColor,-15,0,(sec-15)*6*Math.PI/180,250,250);
    }
    function drowClock(){
        panel.clearRect(0,0,500,500);


        var date = new Date();
        var sec = date.getSeconds();
        var min = date.getMinutes();
        var hour = date.getHours() + min/60;
        drowCircle(panel,7,'blue',250,250,200);
        drowScales(panel);

        drowHourPoint(panel,hour);
        drowMinPoint(panel,min);
        drowSecPoint(panel,sec);

        drowPoint(panel,1,centerColor,250,250,7);
        //drowHorizontalLine(panel,10,10,'red',-5,0,0,250,250);
    }
    //drowHorizontalLine(panel,7,30,'#F00',0,0,Math.PI,250,250);
    drowClock();
    setInterval(drowClock,1000);
    function save(){
        var image = clock.toDataURL("image/png").replace("image/png", "image/octet-stream");
        location.href=image;
    }
</script>
</body>
</html>

0 0