github 仓库：liuqinh2s/AwesomeWeb
项目展示：replit - AwesomeWeb
项目上线地址：jujuxi

最近想像洛雪音乐一样做一个免费的视频 app，主要学习对象是努努视频，说干就干，先看看努努用了哪些第三方 js 库，打开努努视频网站：nunuyy5.org，然后打开开发者工具，可以看到用了这些：

1. hls.js
2. jquery.js
3. p2p-media-loader-core.min.js 和 p2p-media-loader-hlsjs.min.js

1. 位置：坐地铁从田贝站出来，不要从水贝站出来，田贝站 F 口出来就是水贝万山
2. 店：零售店和批发展厅，人气最旺金展负一楼，宝刀不老水贝万山，价格最便宜丽铂飞（也叫新一佳）

基础知识

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; /* 左上角椭圆半径是全宽高 */

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