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

最新推荐文章于 2022-10-09 14:55:58 发布

虎序

最新推荐文章于 2022-10-09 14:55:58 发布

阅读量642

点赞数 1

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

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

版权

本文介绍了如何使用HTML5的Canvas和ES5原生语法动态绘制圆形并实现拖放功能。文章通过示例代码展示了如何解决在移动圆时超出画布边界的问题，提供了一个优化的移动事件处理方案。

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

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 circles;
	
	var circles2;

    var mouseDown = fa