使用Canvas创建并拖放图形元素

一个工程任务需要对图像中的动物、车辆等目标进行标记，以支持算法的训练过程。根据项目实际操作经验，本文归纳了如何利用Canvas实现矩形的绘制功能，并支持对矩形进行拖动操作。

绘制功能的实现逻辑如下：
1、当鼠标被按下时，记录下鼠标的初始位置，作为矩形的起始坐标(x1，y1)
2、在鼠标移动的过程中，将当前鼠标的终点位置视为矩形的另一端点(x2,y2)
3、在移动过程中持续更新并重新绘制矩形

拖拽功能的实现逻辑如下：
1、当鼠标被按下时，判断当前点击的位置是否位于矩形区域内
2、若点击位置处于矩形区域内，则记录此时鼠标的坐标(x1,y1)
3、在鼠标移动的过程中，获取当前鼠标的坐标(x2,y2)
4、计算出鼠标的位移量(x2-x1,y2-y1)
5、将该位移量分别叠加到矩形的起始和结束坐标上
6、完成调整后重新绘制整个矩形

demo演示效果如下：

源代码在GitHub平台上的存储位置：
<https://github.com/lesliefish/WebDevelopment/blob/