使用Canvas绘制形状，并能拖拽形状

最新推荐文章于 2024-03-31 16:50:54 发布

原创

最新推荐文章于 2024-03-31 16:50:54 发布 · 置顶 · 4k 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍了如何在Canvas上绘制矩形并实现矩形的拖拽功能。通过记录鼠标按下时的位置和移动过程中的坐标，计算矩形的起点和终点，实现矩形的绘制与拖动。提供了一个GitHub上的demo链接，展示具体实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个项目需要对图片上的动物、车等进行标注，用于算法训练。本文基于项目实践，总结了下使用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/master/Demos/Canvas/DrawRectAndDrag.html

源码

<!--
 * @Author: lesliefish
 * @Date: 2021-06-07 20:35:56
 * @LastEditTime: 2021-06-07 20:40:25
 * @LastEditors: Please set LastEditors
 * @Description: using canvas draw a rect and drag it
 * @FilePath: \WebDevelopment\Demos\Canvas\DrawRectAndDrag.html
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 绘制形状，绘图拖拽</title>
</head>

<body>
    <div class="main">
        <canvas id="myCanvas" width="500px" height="300px"></canvas>
        <canvas id="myCanvas2" width="500px" height="300px"></canvas>
    </div>

    <script>

        class CavansDemo {
   
   
            /**
             * @description: 构造函数 
             * @param {*} canvasId 要操作的canvasid
             * @param {*} drawColor 绘制颜色
             * @param {*} imageUrl  背景图片url
             * @return {*}
             */
            constructor(canvasId, drawColor, imageUrl) {
   
   
                this.oCanvas = document.getElementById(canvasId);
                this.ctx = this.oCanvas.getContext("2d");
                this.imageUrl = imageUrl;
                this.drawColor = drawColor;
                this.oShape = null;
                this.bDrawState = false; // 绘制状态默认false
                this.bDragState = false; // 拖拽状态默认true
                // 初始化图片对象
                this.initImage();