canvas绘制画框并获取坐标点

最新推荐文章于 2024-08-02 14:02:21 发布

wolfking__

最新推荐文章于 2024-08-02 14:02:21 发布

阅读量259

点赞数 3

文章标签： javascript 前端 html canva可画 css3 css

本文链接：https://blog.csdn.net/wolfking__/article/details/140668932

版权

canvas绘制画框并获取坐标点


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
  <!--画布-->
  <canvas id="myCanvas" width="800" height="600"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var isDragging = false;
    var startX, startY, endX, endY; // 矩形起始点坐标和结束点坐标
    // 鼠标按下事件
    canvas.addEventListener('mousedown', function(e) {
        isDragging = true; // 设置拖动状态为true
        startX = e.offsetX; // 记录起始点X坐标
        startY = e.offsetY; // 记录起始点Y坐标
    });
    // 鼠标移动事件
    canvas.addEventListener('mousemove', function(e) {
        if (!isDragging) return; // 如果当前不是拖动状态，则返回
        ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
        endX = e.offsetX; // 记录结束点X坐标
        endY = e.offsetY; // 记录结束点Y坐标
        drawRect(startX, startY, endX, endY); // 绘制矩形
    });
    // 鼠标抬起事件
    canvas.addEventListener('mouseup', function() {
        isDragging = false; // 设置拖动状态为false
        console.log("绘制的矩形坐标[" + startX + "," + startY + "] 至 [" + endX + "," + endY + "]");
    });
    // 绘制矩形方法
    function drawRect(x1, y1, x2, y2 , strokeColor = 'red') {
      ctx.strokeStyle = strokeColor;
      ctx.strokeRect(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x2 - x1), Math.abs(y2 - y1)); 
    }
  </script>
</body>
</html>