1、第一步，首先创建一个HTML5页面，在body标签元素内插入三个div标签，然后在三个div标签依次插入canvas，设置对应的ID、宽度和高度，如下图所示：
2、第二步，在<script></script>标签内，编写生成矩形对角线的函数buildRect，调用canvas绘制图形的方法，如下图所示：
3、第三步，保存代码并打开浏览器查看，结果发现矩形出现对角和临边的对角线，如下图所示：
4、第四步，使用同样的方法，编写buildCircle函数，用于生成圆形的对角线，不过这里需要先绘制圆形，如下图所示：
5、第五步，再次保存代码并查看效果，发现圆形斜对角出现一条对角线，连接圆形，如下图所示：
6、第六步，最后给正方形绘制对角线，使用鼠标事件查找正方形的四点的坐标，然后在函数中设置值，如下图所示：
