Canvas系列: 基本使用
本文记录一些基本的操作基本图形绘制
具体代码：
c.beginPath()
c.arc(300, 200, 100, 0, 2 * Math.PI)
const g = c.createLinearGradient(0, 0, 600, 400)
g.addColorStop(0, 'green')
g.addColorStop(1, 'red')
c.fillStyle = g
c.fill()
c.stroke()
c.closePath()
c.beginPath()
c.arc(250, 150, 20, 0, 2 * Math.PI)
c.stroke()
c.closePath()
c.beginPath()
c.arc(350, 150, 20, 0, 2 * Math.PI)
c.stroke()
c.closePath()
c.beginPath()
c.ellipse(300, 200, 10, 30, 0, 0, 2 * Math.PI)
c.stroke()
c.closePath()
c.beginPath()
c.moveTo(250, 300)
...
Canvas系列：windows泡泡屏保
本文尝试用原生canvas实现windows的泡泡屏保效果，基于vue3框架最终效果如下：
首先html代码创建一个canvas画布
<div class="steam">
<canvas width="360" height="520"></canvas>
</div>
...
...
// 页面挂载完毕后，依次执行画布和circle初始化
onMounted(() => {
initCanvas()
createCircles()
})
const initCanvas = () => {
const canvas: any = document.querySelector('canvas')
c = canvas.getContext('2d')
canvas.onmousemove = (e: any) => {
moveInfo.x = e.x
moveInfo.y = e.y
moveInfo.actualX = moveInfo.x - canvas.get ...
Games-104: 第一回
本系列文章，是围绕Game-104课程的内容，做的备忘录及自己的一些想法游戏的伟大之处在于，他在尝试模仿上帝的行为。任何游戏引擎的核心，看俩函数：tickLogic、tickRender。前者用于计算obj的各种状态，后者用于绘制出来。这里的tick，可以理解为时间片。我们说动画的理论基础是：人是靠视觉残留感知一个连续世界的。在之前介绍屏幕刷新率中我们有解释过，对于人眼而言，若一秒钟闪24张图片，那么人眼就认为是连续的。即使是我们正常浏览网页，看起来页面是没有在动的，但实际上却在以屏幕刷新率的闪动频率不停的变化着。那么游戏引擎的基石也是如此。需要在每一帧的时间间隔内完成上面的俩函数的绘制。在tick1时刻，张三静止，tick2时刻张三挥拳打了李四，李四掉了五点血（假定在这个区间内完成），ticklogic做的事情是计算拳头、李四等obj的各个状态，确定之后，重新render生成新的帧绘制出来。
而也就是这两部分，决定了不管是软件还是web应用的性能。
算法：动态规划
本文介绍一种经典的算法思想：动态规划
官方文邹邹定义：将一个问题拆成几个子问题，分别求解这些子问题，即可推断出大问题的解。个人理解：未来取决于当下，脱钩于过去使用DP的场景：能将大问题拆成几个小问题，且满足无后效性、最优子结构性质。
经典算法必须有经典场景：斐波那契数列。这种数列的一个最大特点： 初始值：f(1) = 1, f(2) = 1,之后的每一项都是前两项的和。所以f(3) = f(1) + f(2) = 2….
1. 爬楼梯爬楼梯的方式有两种，一次一级或者两级，那么跳到n级，有多少种跳法？实际就是一个斐波拉契数列，f(1) = 1, f(2) = 1…
const climbStairs = function(n) {
if (n <= 1) return 1
const f = [1,2]
for (let i = 2; i < n; i++) {
f[i] = f[i-1] + f[i-2]
}
return f ...
算法：大数相加
js的大数相加所遇到的问题这里只需要明确一点，就是思路。两数相加很简单：
return a + b
如此这般，最后的结果： 1e3之类。
正确的思路应该是用指针遍历，进位累加即可。
响应常用状态码
本文记录一些常用状态码1xx：
100: 请求已被处理，需要客户端继续发送请求。例如post。
2xx：请求成功。
200: 请求成功，返回数据
204: 请求成功，无数据
3xx：重定向
301: 永久
302: 暂时
304: 协商缓存
4xx：客户端错误
401: 未授权，要求身份验证
403: forbidden
404: not-found
5xx：服务器错误
500: 服务器遇到错误，无法完成请求。
502: 网关错误
503: 停机维护服务器无法使用
算法：递归
本文介绍递归思想先看一道经典的题：
全排列// 非重复数字：
/**
* @param {number[]} nums
* @return {number[][]}
*/
var permute = function(nums) {
let res = []
let used = new Array(nums.length).fill(0)
const f = (n1) => {
if(n1.length === nums.length) {
// let temp = JSON.parse(JSON.stringify(n1))
res.push([...n1])
// 此处发现一个很懵逼的问题，若写成res.push(n1),结果居然都为空。。。
}
for(let i = 0; i < nums.length;i++) {
...
算法：链表
本文主要介绍链表相关链表这种数据结构的特点， 就是每一个节点对象通过一个next字段，链接下一个节点,所以总体看来， 就是一种链条的结构。
// 结构
const listNode = function(val) {
this.val = val
this.next = null
}
查找：时间复杂度O(n), 空间复杂度： O(1)删除：时间复杂度O(n), 空间复杂度： O(1)
练练手：
1. 牛客BM1–链表反转思路很清晰： 从头部节点遍历，挨个取出节点，暂存next节点。取出节点连接到新节点即可，最后返回。
let res
whiel(head) {
const current = head
const next = head.next
current.next = res
res = current
head = next
}
return res
2. 返回倒数第k个元素/*
* function ListNode(x){
* ...
CSS系列：常见问题
本文用于记录常见css面试题
前端响应式的策略？
媒体查询@media。根据设备的不同宽高数据，使用不同的样式代码
百分比
vm、vh
rem。
两栏布局，右侧自适应？
flex: 1
calc(100% - 左侧宽度)
左侧浮动，右侧margin-left
盒子水平垂直居中几种方案
3.1 flex
<div class="father">
<div class="child"></div>
</div>
.father {
margin: 100px auto;
width: 1000px;
height: 500px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.child {
border: 1px solid green;
width: 500px;
height: 100px;
&# ...