H5 使用画布Canvas + ES5 纯原生动态绘制一个矩形，矩形可实现位置拖放

最新推荐文章于 2023-09-09 16:20:37 发布

虎序

最新推荐文章于 2023-09-09 16:20:37 发布

阅读量789

点赞数

分类专栏： canvas 文章标签： html5

本文链接：https://blog.csdn.net/qq_37128634/article/details/108194291

版权

这篇博客介绍了如何使用HTML5的Canvas结合ES5，纯原生代码实现矩形的动态拖放功能。提供了一个简单的代码示例，适用于单一矩形的绘制。对于需要绘制多个矩形或鼠标拖动绘制的情况，作者给出了基本思路，并提示读者自行扩展。文章内容包括按下、移动、弹起三个阶段的处理，以及拖动过程中图形的实时更新。

摘要由CSDN通过智能技术生成

废话不多说直接上代码：

需要的人，直接把一下代码拷贝过去就行。

PS：该demo是单项的绘图，如果需要实现绘制多个矩形，请自行增加对应的操作。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>矩形</title>
</head>
<style>
    .cus-canvas {
        background: rgb(50, 204, 243);
    }
</style>

<body>
    <!-- 矩形  -->
    <div>
        <canvas id="canvas" class="cus-canvas" width="800" height="600"></canvas>
    </div>
</body>
<script>
    // 对象:
    const canvas = document.getElementById('canvas');// 获取DOM对象
    const ctx = canvas.getContext('2d');// 创建画布对象

    // 参数：

    var cw = canvas.width, ch = canvas.height; //画布宽高 - 移动距离的限制条件

    var list = [] //矩形点坐标数组

    //矩形的宽高
    var rw;
    var rh;

    var rect; //矩形参数

    var mouseDown = false; //是否选中反应区

    var deltaX = 0;

    var deltaY = 0;

    // 按下,判断点是否在区域内 在区域内,激活选中反应区
    canvas.onmousedown = function (e) {
        if (list.length == 2) {
            /** 获取视口左边界与canvas左边界的距离 加上 鼠标点击位置与canvas左边界的长度，这个值是相对移动过程中不变的值 */
            deltaX = e.clientX - rect.x;
            deltaY = e.clientY - rect.y;
            //获取点击点的点坐标