基础知识

1. 默认大小：如果不设置宽高，canvas 的默认宽高是：width: 300px; height: 150px;。
2. 替换内容：与<img>元素不同，<canvas>元素需要结束标签</canvas>，如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

   什么是替换内容，就是在某些东西加载不出来的时候（原因可能多种多样，比如浏览器太老不支持这个东西，比如网络不好加载不出），那么就给这些东西替换成其他内容，比如<img>标签就有 alt 属性用于在图片加载不出的时候显示文本。canvas标签也有相应的措施，用法是：

1
2
3
4
5
6
7

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt="" />
</canvas>

3. 渲染上下文（The rendering context）：常用的渲染上下文有 2D，3D。2d 写法如下:

1
2
3
4
5
6
7

const canvas = document.getElementById("canvas");
if (canvas.getContext) {
  const context = canvas.getContext("2d");
  // drawing code here
} else {
  // canvas-unsupported code here
}

我打算自己做一个数独游戏，主要分为两步：

1. 生成一个数独
2. 验证玩家填入的数字是否正确

生成一个数独可以有很省事的办法，就是直接从数独库中随机选一个（甚至可以直接把空白都给你挖好）。也可以用暴力方法（回溯法），一行一行去填，进行不下去就回溯到上一步。

生成数独最高效的算法是：舞蹈链，实际上舞蹈链是一种数据结构，是为了X 算法而产生的，而 X 算法是用来解决一类问题：精确覆盖问题

插个题外话，我朋友说，东野圭吾的小说《嫌疑犯 X 的献身》，的凶手就在研究这个问题，有兴趣可以顺带看看，这小说挺有名的。

精确覆盖问题是一个 NP 完全问题，NP 问题的概念我差不多忘光了，得重新看看

看《CSS 解密》的时候遇到 border-radius 不是很懂，有个例子如下：

1
2

border-radius: 100% 100% 0 0 / 100% 0 0 0; /* 左上角椭圆半径是半宽高 */
border-radius: 100% 0 0 0 / 100% 0 0 0; /* 左上角椭圆半径是全宽高 */

差别挺大的对吧，原因就是角与角之间出现了挤兑（或者说重叠），如果遇到了重叠怎么办呢？怎么表现呢？原理是什么？

首先什么是 AI 时代，我所认为的 AI 是可以让计算机产生的智力，像类似于人一样工作，做以前简单的逻辑无法完成的事情，比如：

• 识别图片里的文字
• 识别图片里有没有猫
• 自动驾驶，识别路况
• 下棋，国际象棋，围棋，击败人类冠军
• AI 换脸，将图片和视频中的人脸换成另一个人的
• 根据关键词，作画，写小说
• 上网搜集资料整合出摘要

以上都是 AI 目前已经能完成的事情，传统的代码是无法完成以上这种复杂的工作的。我把传统代码无法完成，又有点类似人才能办到的混沌且复杂的事情（甚至带有一些创造力）称作 AI。AI 不是指像人一样能通用的处理任何智力问题，而是能一个一个攻克具体的智力问题，AI 能做到的事情已经越来越多。其产生的生产力是巨大的，并不比互联网时代低。

居中是 css 中很重要的一个基础知识，主要分三个方向讨论：

1. 水平居中 or 垂直居中
2. 文本居中 or 容器居中（块级元素）
3. 设置父容器 or 设置自身 or 都需要设置