# canvas_clock

**Repository Path**: mchpony/canvas_clock

## Basic Information

- **Project Name**: canvas_clock
- **Description**: 使用Canvas, 绘制时钟
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-09
- **Last Updated**: 2022-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 时钟绘制

[toc]

步骤：

## 1.搭建一个定时刷新的动画结构

```js
window.onload = function(){
    init();//初始化
    
    //定时（每隔60毫秒）调用
     setInterval(()=>{
        clear(); //清屏     
        render();//渲染
        update();//更新时间
    },60);
}
```

## 2.声明相关全局变量

这里都是一个全局参数，如画布，画布上下文，中心点坐标，时间，坐标偏转角度，钟表半径等 

```
let canvas , context;
let canvasWidth = canvasHeight=300;//画布高宽
const yuan = 2 * Math.PI;//一个圆的弧度
let r = canvasWidth/2/5*4;  //中心点距离,钟表的半径
let centerP = { x: canvasWidth/2, y: canvasHeight/2 };  //中心点坐标
let angle = - (yuan / 4);//偏转角度   
let showTime = {hh:0,mm:0,ss:0};//显示的时间  
```

## 3.分别定义相关函数

### `init()`:初始化

初始化时间，画布大小，画布上下文

### `clear()`:清空画布

```js
function clear(){
    context.clearRect( 0, 0, canvasWidth, canvasHeight );
}
```

### `update()`:更新数据

将系统时间，封装成显示的时间对象，在界面显示当前时间

### `render()`：渲染

主要有两块内容，

​		1.表盘的绘制

​	    2.指针的绘制

```js
function render(){
    drawClockDial();//绘制表盘
    drawPointer();  //绘制指针
}
```

### `drawClockDial()`:绘制表盘

主要绘制四个内容

​	1.中心点

​	2.外圈

   3.时刻度线

​	4.分刻度线

上面各种刻度线还有下面的三个指针，都是绘制直线，下面封装一个绘制直线的方法

#### `drawLine(startPoint,endPoint,borderStyle)`：//绘制直线

为了更灵活被调用，设置4个参数

startPoint,endPoint：直线开始，结束的坐标

borderStyle:线的样式，现在包括粗细（width）和颜色(color)

​	width:线的粗细

​	color:线的颜色

### `drawPointer()`:绘制时，分，秒针

​		指针的起点都在中心，主要难度在计算指针的顶点

​		时间决定角度，角度+长度就可以决定坐标

​		最后是中心偏转，坐标角度偏转

```js
//绘制时，分，秒针
function drawPointer(){
    let width = 6;
    let  color= "#FD971F";
    let curHours = showTime.hh;
    let curMitnues = showTime.mm;
    let curSeconds = showTime.ss;
    let deg = curHours/12*yuan+(curMitnues/60*yuan/12)+(curSeconds/60*yuan/60/60)+angle;
    let hhP = {            
            x:(r/10*6)*Math.cos(deg)+centerP.x,
            y:(r/10*6)*Math.sin(deg)+centerP.y
        };
    deg = yuan/60*curMitnues+(curSeconds/60*yuan/60)+angle;
    let mmP = {
        x:(r/10*7.5)*Math.cos(deg)+centerP.x,
         y:(r/10*7.5)*Math.sin(deg)+centerP.y
        };
    deg = yuan/60*curSeconds+angle;    
    ssP = {
        x:(r/10*9)*Math.cos(deg)+centerP.x, 
        y:(r/10*9)*Math.sin(deg)+centerP.y
    };
     //时针   
    width = 6;
     drawLine(centerP,hhP,{width:width,color:color});  
     //分针
     width = 4;
      drawLine(centerP,mmP,{width,color});  
     //秒针
     width =2;
      drawLine(centerP,ssP,{width,color}); 
}
```