鼠标点击动态绘制直线 canvas

最新推荐文章于 2024-05-21 23:21:19 发布

明天用来嘲笑昨天

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量471

点赞数 10

文章标签：前端

本文链接：https://blog.csdn.net/weixin_64761354/article/details/135329419

版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>鼠标点击绘制直线</title>
    <style>
        #canvas {
            border: 1px solid black;
            margin: 0 auto;
        }
    </style>
</head>

<body onload="init()">
    <canvas id="canvas" width="500" height="300"></canvas>

    <script src="drawLine.js"></script> <!-- 引入自定义的 JavaScript 文件 -->
</body>

</html>

<script>




    var canvas = document.getElementById("canvas"); // 获取 canvas 元素
    var context = canvas.getContext('2d'); // 创建绘图上下文对象
    function init() {

        canvas.addEventListener('mousedown', function (event) {
            let startX = event.clientX - canvas.offsetLeft + window.pageXOffset; // 计算起始点 x 坐标
            let startY = event.clientY - canvas.offsetTop + window.pageYOffset; // 计算起始点 y 坐标
            canvas.addEventListener('mousemove', event => {
                if (event.buttons !== 1) return false; // 如果不按下左键则返回

                let endX = event.clientX - canvas.offsetLeft + window.pageXOffset; // 更新结束点 x 坐标
                let endY = event.clientY - canvas.offsetTop + window.pageYOffset; // 更新结束点 y 坐标

                context.clearRect(0, 0, canvas.width, canvas.height); // 清空画布内容
                drawArrow(context, startX, startY, endX, endY)
            }); // 添加 mousemove 事件处理函数
        });
    }

    function drawArrow(ctx, fromX, fromY, toX, toY, theta = 30, headlen = 10, width = 2, color = '#f36') {
        // 计算箭头相对于直线的角度
        let angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
            angle1 = (angle + theta) * Math.PI / 180,
            angle2 = (angle - theta) * Math.PI / 180,
            topX = headlen * Math.cos(angle1),
            topY = headlen * Math.sin(angle1),
            botX = headlen * Math.cos(angle2),
            botY = headlen * Math.sin(angle2);
        // ctx.save();
        ctx.beginPath(); //重新开始路径
        let arrowX = fromX - topX,
            arrowY = fromY - topY;
        ctx.moveTo(fromX, fromY); // 将路径移到起始点位置
        ctx.lineTo(toX, toY); // 从起始点向结束点绘制直线
        arrowX = toX + topX;
        arrowY = toY + topY;
        ctx.moveTo(arrowX, arrowY);
        ctx.lineTo(toX, toY);
        arrowX = toX + botX;
        arrowY = toY + botY;
        ctx.lineTo(arrowX, arrowY);
        ctx.strokeStyle = color;
        ctx.lineWidth = width;
        ctx.stroke();
        ctx.restore();
    }






</script>