HTML基于canvas实现截图功能的知识点涵盖以下几个方面：
1. 快捷键的设置与使用
文章提到通过设置快捷键来开始和结束截图过程，这涉及到JavaScript中的键盘事件监听和处理。作者使用了jQuery的keyup事件监听器来检测用户何时按下了预设的开始截图快捷键。为了避免快捷键冲突，作者允许用户传入一个数组，以支持多个快捷键。
2. DOM转换为canvas
要实现截图功能，首先需要将DOM元素渲染到canvas上，这正是html2canvas库所做的事情。该库能够将DOM元素绘制到canvas元素上，生成与页面显示一致的图像。这对于截图功能至关重要，因为它允许用户捕获当前页面的视觉内容。
3. 实时图像绘制
文章中提到通过监听鼠标的mousedown和mousemove事件，来模拟截图框的实时绘制。当用户按下鼠标开始拖拽时，需要不断地绘制和更新一个矩形框，表示截图的选中区域。这里使用了Jcanvas库，它提供了一个图层的概念，使得可以很方便地在同一个画布上绘制和移除图形。
4. 局部截图的保存
文章最后提到了如何保存截取的图像。这部分代码虽然未在给出的片段中显示，但通常涉及到使用canvas.toDataURL()方法将canvas内容转换为一个数据URL，该URL表示的是图片数据。开发者可以通过这个URL创建一个img元素，或者直接将这个URL用于下载。
5. canvas API的运用
在文章中没有直接运用原生的canvas API来实现截图功能，但文章透露了使用canvas API的难度。尤其在处理实时绘制和交互时，如果没有使用第三方库，开发者需要自己管理图层，以及在每次mousemove事件触发时清除和重新绘制图形。
6. 鼠标事件处理技巧
在实现截图框跟随鼠标移动时，需要处理好事件监听和状态更新。例如，当鼠标按下时记录开始位置，并在鼠标移动过程中不断更新矩形的位置和大小。
7. canvas元素的使用
文中描述的截图功能是通过在页面上添加一个或多个canvas元素实现的。每个canvas元素根据其用途不同，可能需要不同的配置和事件处理逻辑。
8. 兼容性考虑
虽然文章没有直接提到，但使用jQuery和html2canvas等库实现截图功能时，需要考虑到不同浏览器间的兼容性问题。例如，一些旧版浏览器可能不支持某些HTML5或CSS3特性。
9. 代码组织和模块化
一个完整的截图功能应该包含清晰的函数划分，例如文章中提到的screenShot()函数，以及开始截图功能的beginShot()函数。良好的代码组织有助于后续的维护和功能拓展。
以上便是基于文章内容的详细知识点介绍。需要注意的是，文中的一些内容可能由于OCR扫描和文字识别的问题存在些许的不连贯或错误，但整体上的技术要点和实现逻辑还是清晰可辨的。开发类似的截图功能时，以上知识点是不可或缺的参考。
