canvas详解
2021-03-02 15:00:50

在我书的第六章中有一个关于MNIST手写数字的例子,当数据集加载完成之后,用户可以在<canvas/>上输入手写数字,点击「预测」按钮之后,浏览器会弹出经模型预测之后的结果;在我书的第九章和第十章中,分别有关于目标检测和人体姿态检测的案例,当关键点的得分符合一定要求时,会通过<canvas/>将关键部分绘制出来,请看效果:

图1 - MNIST手写数字案例

图2 - 人体姿态检测案例

图3 - 目标检测案例

接下来,我们将在本文中详细讲解一下上述三个模块均用到的一个技术<canvas/>

参考资料

  1. MDN Web Docs:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

1. canvas概述

2. canvas入门

3. 设置canvas绘制状态

4. 保存和恢复canvas绘制状态

5. 使用canvas绘制图像

6. 使用canvas绘制图像

7. 使用路径绘制图形

8. 绘制圆弧

9. 绘制贝塞尔曲线

10.创建剪辑区域

11.绘制文本

12.你画我猜(MNIST手写数字版)

13.绘制关键点(人体姿态检测、目标识别)

14.文章最后

以上就是本文的所有内容,小伙伴们学会了嘛?快去实践一下吧!更多详情请关注我的更多开源作品:
1. 微信公众号(hahaCoder)

图9 - 微信公众号

2. 微信小程序(hahaAI)

图10 - 微信小程序

3. Github
链接地址:https://github.com/TURBO1002