MicroSmartHome
diff --git a/‎canvas/clock/assets/1563160983379.png‎
52 KB b/‎canvas/clock/assets/1563160983379.png‎
52 KB
diff --git a/‎canvas/clock/assets/1563161557373.png‎
103 KB b/‎canvas/clock/assets/1563161557373.png‎
103 KB
diff --git a/‎canvas/clock/assets/1563161728608.png‎
63.1 KB b/‎canvas/clock/assets/1563161728608.png‎
63.1 KB
diff --git a/‎canvas/clock/assets/1563161743001.png‎
63.1 KB b/‎canvas/clock/assets/1563161743001.png‎
63.1 KB
diff --git a/‎canvas/clock/assets/1563162034809.png‎
87.9 KB b/‎canvas/clock/assets/1563162034809.png‎
87.9 KB
diff --git a/‎canvas/clock/assets/1563162284953.png‎
52.2 KB b/‎canvas/clock/assets/1563162284953.png‎
52.2 KB
diff --git a/‎canvas/clock/js/scene.js‎
Lines changed: 5 additions & 10 deletions b/‎canvas/clock/js/scene.js‎
Lines changed: 5 additions & 10 deletions
diff --git a/‎canvas/clock/readme.md‎
Lines changed: 136 additions & 3 deletions b/‎canvas/clock/readme.md‎
Lines changed: 136 additions & 3 deletions
diff --git a/‎desktop.ini‎
Lines changed: 4 additions & 0 deletions b/‎desktop.ini‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎知识点/note.md‎
Lines changed: 132 additions & 1 deletion b/‎知识点/note.md‎
Lines changed: 132 additions & 1 deletion
@@ -15,9 +15,9 @@ class Scene {
     this.drawPoint()
     if (this.time > 40) this.drawRect()
     let { min, sec, hour } = this.getAngle()
-    if (this.time > 75) this.drawScale(cx, cy, 4, 120, sec, '#de6655')
-    if (this.time > 80) this.drawScale(cx, cy, 4, 100, min, '#666665')
-    if (this.time > 90) this.drawScale(cx, cy, 4, 80, hour, '#666665')
+    if (this.time > 75) this.drawNeedle(cx, cy, 4, 120, sec, '#de6655')
+    if (this.time > 80) this.drawNeedle(cx, cy, 4, 100, min, '#666665')
+    if (this.time > 90) this.drawNeedle(cx, cy, 4, 80, hour, '#666665')
     if (this.time > 100) this.drawPane2()
   }
   update() {
@@ -32,7 +32,7 @@ class Scene {
       let angle = (i * 360/12 + 90) * Math.PI / 180
       ctx.save()
       ctx.translate(cx + x, cy + y)
-      if (this.time > 52 + i) this.drawScale(0, 0, w, h, angle, '#b70d0d')
+      if (this.time > 52 + i) this.drawNeedle(0, 0, w, h, angle, '#b70d0d')
       ctx.rotate(angle)
       ctx.font="24px Verdana";
       ctx.fillStyle = '#272727'
@@ -81,7 +81,7 @@ class Scene {
    * @param {number} angle 偏移角度
    * @param {string} color 颜色值
    */
-  drawScale(x, y, w, h, angle, color='#000') {
+  drawNeedle(x, y, w, h, angle, color='#000') {
     ctx.save()
     ctx.translate(x, y)
     ctx.rotate(angle)
@@ -103,9 +103,4 @@ class Scene {
     ctx.arc(x, y, r, 0, 6.28)
     ctx.fill()  
   }
-  delayDraw(fn, ms=1000) {
-    return new Promise((resolve, reject) => {
-      setTimeout(resolve(ms), ms)
-    })
-  }
 }
@@ -1,10 +1,143 @@
 # canvas绘制钟表
 
-效果如图所示
+## 效果如图所示
 
 ![Honeycam 2019-07-09 11-54-04](./assets/01.gif)
 
-详细设计过程如下图所示
+## 详细设计过程
+
+### 1. 分析
+
+这个图形较为简单，使用的canvas api
+
+- arc() 画圆 
+
++ fillRect() 画矩形 
++ fillText() 画字
+
+### 2. 拆分 & 图层
+
+图形虽简单，但由于涉及的图形较多，这里面有一些覆盖关系，所以要分析图层关系，这也是我们后面要依次实现的函数，如下图所示
+
+![1563162284953](assets/1563162284953.png)
+
+### 3. 绘制
+
+1. 外圆盘绘制 drawPane
+
+   绘制圆盘的过程其实很简单
+
+   ```
+   // 绘制圆api
+   arc(x, y, r, 0, 2*PI)
+   
+   // 由于绘制的圆较多，可以封装这样一个函数
+   function drawArc(x, y, r, color) {...}
+   
+   // 依次绘制3个圆
+   drawArc(200, 200, 200, '#ff1515')
+   drawArc(200, 200, 190, '#b70d0d')
+   drawArc(200, 200, 180, '#ffffff')
+   ```
+
+2. 绘制分钟刻度 drawPoint
+
+   分钟刻度共60个，圆环共360度，每刻度360/60，然后这里面使用三角函数求解即可
+
+   ```
+   // 伪代码
+   for(let i=0; i<60; i++) {
+     let α = i * 360/60
+     let x = R * cosα
+     let y = R * sinα
+     arc(x, y, R, 0, 2*PI)
+   }
+   ```
+
+   ![1563161557373](assets/1563161557373.png)
+
+3. 绘制矩形 drawRect
+
+   小时刻度共12个，圆环共360度，每刻度360/12，小时刻度看似和分钟刻度差不多，其实难度还是比较大的，
+
+   因为默认的旋转中心在(0,0)，每次绘制需要手动的修改旋转中心
+
+   ```
+   // 伪代码
+   for(let i=0; i<12; i++) {
+     let α = i * 360/12
+     let x = R * cosα
+     let y = R * sinα
+     translate(x, y)
+     rotate(α + 90)  // 思考为啥要 + 90度呢？
+     fillRect(0, 0, w, h)
+   }
+   ```
+
+   ![1563161743001](assets/1563161743001.png)
+   ![1563162034809](assets/1563162034809.png)
+   
+   4. drawNeedle
+   
+      有了前面的基础，绘制指针就会简单很多，由于绘制指针和小时刻度相似，这里把它抽出来，做成单独的函数
+   
+      ```
+      drawScale(x, y, w, h, angle, color) {...}
+      ```
+   
+      计算指针的角度，这个看似难，其实非常简单
+   
+      举个例子
+   
+      - 秒针、分针共60刻度，均分360度 -> 360/60
+   
+      - 时针共12刻度，均分360度 -> 360/12
+   
+      这样做还是不够的，还有考虑秒对分的影响、秒分对时的影响，所以可以这样换算
+   
+      ```
+      // 偏移角度 = 折算的当前时刻数 * 单位角度
+      
+      sec * 360/60
+      (min + sec/60) * 360/60
+      (hour + min/60 + sec/60/60) * 360/12
+      ```
+   
+   5. drawPane2
+   
+      与drawPane相同就不赘述了
+
+## 代码
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-![1562655110920](./assets/1562655110920.png)
 
@@ -0,0 +1,4 @@
+[ViewState]
+Mode=
+Vid=
+FolderType=Generic
@@ -18,6 +18,84 @@
 
 - 比如login和regisger组件里的校验
 
+```
+const register = (data) => {
+  let { username, password, repassword, code } = data
+
+  if (!validate(username.rule, username.value)) {
+    username.callback()
+    return false
+  }
+  if (!validate(password.rule, password.value)) {
+    password.callback()
+    return false
+  }
+  if (!validate(repassword.rule, repassword.value)) {
+    repassword.callback()
+    return false
+  }
+  if (!validate(code.rule, code.value)) {
+    code.callback()
+    return false
+  }
+  return true
+}
+
+const login = (data) => {
+  let { username, password } = data
+
+  if (!validate(username.rule, username.value)) {
+    username.callback()
+    return false
+  }
+  if (!validate(password.rule, password.value)) {
+    password.callback()
+    return false
+  }
+  return true
+}
+
+const write = (data) => {
+  let { title, category, description, text } = data
+  
+  return Object.values(data).some(e => {
+    return !validate(e.rule, e.value)
+  })
+
+  if (!validate(title.rule, title.value)) {
+    title.callback()
+    return false
+  }
+  if (!validate(category.rule, category.value)) {
+    category.callback()
+    return false
+  }
+  if (!validate(description.rule, description.value)) {
+    description.callback()
+    return false
+  }
+  if (!validate(text.rule, text.value)) {
+    text.callback()
+    return false
+  }
+  return true
+}
+
+const validate = (rule, value) => {
+  let reg = new RegExp(rule)
+  return reg.test(value)
+}
+
+export default {
+  register,
+  login,
+  write,
+  validate,
+}
+```
+
+
+
 ## 2. 一些算法
 
 ### 数组操作
@@ -113,4 +191,57 @@
    
    ```
 
-9. 介绍一下Set Map对象
+9. 介绍一下Set Map对象
+
+
+
+## 一些问题
+
+1. h5新增标签，为啥加强标签语义化
+
+   常用的新增标签：header nav main section asider footer canvas video audio
+
+- 对开发者友好，结构清晰，便于开发维护
+- 对设备优化，利于SEO，利于设备解析（屏幕阅读器、盲人阅读器）
+
+2. 为啥要清楚浮动，如何清除浮动
+
+   高度塌陷
+
+- 父元素设置高度
+- overflow：hidden
+- clear：both
+
+3. 行内元素、块元素有那些，有什么不同
+
+   行内：span input img button a（宽、高内容撑开）
+
+   块：div p h1-h6 ul dl（宽度独占一行，高度内容撑开）
+
+   现象
+
+   - 行内元素默认水平排列
+   - 块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素
+   - 行内元素设置width height无效，margin上下无效，padding上下无效。
+
+4. 前端存储方式有那些
+
+- cookie 请求头上带着数据，大小是4KB，document.cookie = '名字=值'
+- sessionStorage 本地存储，关闭页面后即被清空
+- localstorage 本地存储，key-value存储，永久存储，5MB
+- application cache 离线缓存，离线浏览，提升页面载入速度
+
+5. VUE双向绑定的原理
+
+6. css不换行、超出省略号
+
+   ```
+   overflow: hidden;
+   text-overflow:ellipsis;
+   white-space: nowrap;
+   ```
+
+7. 跨域问题
+
+
+
-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +[ViewState]
 +Mode=
 +Vid=
 +FolderType=Generic