1.模仿百度北京时间时钟

时间 2021-02-17

标签 html canvas 微信 spa 指针 rest code 视频 htm 栏目 HTML 繁體版

原文原文链接

最近公司销售有业务须要，要修改百度页面的北京时间，拍照和录视频。因此参考百度原代码，作了一些注释。在下一篇文章中，我会用另外一种方法，也写出这个效果。html

效果预览：https://codepen.io/andy-js/pen/wvBPgBW
右键打开新窗口预览效果更好哦！canvas

直接上代码。微信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>andy-js:模仿百度北京时间时钟</title>
    <style>
    *{margin:0;padding:0}
    #box{width:100px;height:100px;position: relative;margin:200px auto;background:linear-gradient(#0b6ec2,#6aa9e1)}
    #c1{position: absolute;top:50%;left:50%;z-index: 1;margin:-33px 0 0 -33px;}
    #c2{position: absolute;top:50%;left:50%;z-index: 2;margin:-33px 0 0 -33px;}
    </style>
</head>
<body>
<div id="box">
    <canvas id="c1" width="66" height="66"></canvas>
    <canvas id="c2" width="66" height="66"></canvas>
</div>  
<script>
var oC1=document.getElementById('c1');  //表盘
var oC2=document.getElementById('c2');  //指针
var ctx2 = oC2.getContext("2d"),ctx1 = oC1.getContext("2d");

//1.先画表盘
var lineLength,   //标线长度
    radius = oC1.offsetWidth / 2;
ctx1.lineWidth = 1;    //线的宽度
ctx1.translate(radius, radius);  //从新映射画布上的 (0,0) 位置  映射到画布正中间   
for (var i = 0; i < 60; i++) {
    lineLength = 4; //默认长度
    ctx1.strokeStyle = "rgba( 255, 255, 255, 0.3 )";  //默认标线颜色，1234淡一点
    if ( i % 5 == 0) {
        lineLength = 8,   //每遇五、0长一点
        ctx1.strokeStyle = "#fff";
    };
    ctx1.beginPath();   //起始一条路径
    ctx1.moveTo(0, lineLength - radius);  //画直线的起点，好比第一条线是0点的位置，如今中心点已是00坐标，因此第一条线应该是X=0,Y=-(33-8);  33是半径
    ctx1.lineTo(0, -radius);  //而后一直画到半径最边上
    ctx1.stroke();  //绘制已定义的路径
    ctx1.closePath();  //关闭路径  
    ctx1.rotate(Math.PI / 30);   //旋转当前画布  旋转一分钟   Math.PI=180度=30分钟=半圆
};

render();  //2.打开页面默认显示
setInterval(render,1000);  //3.每秒种重绘一次

function render(){
    ctx2.clearRect(0, 0, 2 * radius, 2 * radius);   //每次都清空画布 从新画

    var oDate=new Date();  //获取当前时间
    var hour = oDate.getHours(),  //小时
        minute = oDate.getMinutes(), //分
        second =oDate.getSeconds();  //秒
        
    hour > 12 && (hour -= 12);
    hour += minute / 60;
  
    minute += second / 60;
    
    draw(3, "#fff", Math.PI / 6 * hour,  -16);  //时针
    draw(2, "#fff", Math.PI / 30 * minute, -22);  //分针 
    draw(1, "#d93c3c", Math.PI / 30 * second, -24);//秒针
};

function draw(lineWidth, strokeStyle, rotate, end) {
    ctx2.save(),    //保存当前的画布状态  保存映射和旋转以前的状态
    ctx2.lineWidth = lineWidth,     //线条宽度
    ctx2.strokeStyle = strokeStyle,  //颜色
    ctx2.translate(radius, radius), //从新映射画布上的 (0,0) 位置  映射到画布正中间   
    ctx2.rotate(rotate),   //旋转  ###重点是这里的旋转
    ctx2.beginPath(), 
    ctx2.moveTo(0, 6),  //三根指针老是从00位置另外一端多出来一小段
    ctx2.lineTo(0, end),   //三根指针的长度 
    ctx2.stroke(), 
    ctx2.closePath(), 
    ctx2.restore();   //返回以前保存过的路径状态和属性
 };

 /*
 ###旋转讲解
前面说过    Math.PI=180度=30分钟=半圆
因此  Math.PI / 30  等于   1分钟的角度

1.second秒针自己就是1-60之间，因此这里很好理解    当前是多少秒就旋转多少角度

2.时钟  Math.PI/6= 30分钟/6=半圆/6  =  每五分钟 = 每1小时的角度
咱们在前面已经经过  hour > 12 && (hour -= 12);  将时针的数值固定在  <=12
再经过  hour += minute / 60;  获得基数为12的相应的时间比例 由于钟表的一圈有12个时间
再用咱们获得的  每1小时的角度  *  相应的比例

3.分钟  与时钟同理

 */


</script>
</body>
</html>