• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5 canvas实现圆形时钟代码分享

    复制代码
    代码如下:

    <!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);

    panel.fillText("",10,20);
    panel.fillText("<a href="https://www.jb51.net",10,40">https://www.jb51.net",10,40</a>);
    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>
    上一篇:html5 css3网站菜单实现代码
    下一篇:html5的canvas实现3d雪花飘舞效果
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5 canvas实现圆形时钟代码分享 html5,canvas,实现,圆形,时钟,