canvas如何画echarts玫瑰图进阶版！

VIP文章 LoveZJC12138

已于 2023-05-04 14:51:13 修改

阅读量230

点赞数 1

文章标签： echarts javascript canvas 前端 vue

于 2023-05-04 14:24:14 首次发布

本文链接：https://blog.csdn.net/LoveZJC96/article/details/130485739

版权

如果在画出图形之后想要得到鼠标经过了哪条线的数据。那么可以使用以下的方法。

1.isPointInStroke

isPointInStroke是canvas内置的判断鼠标是否在此线段上的方法。

具体使用代码如下：

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

<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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 400px;
            margin: 0 auto;
            box-sizing: border-box;
            /* background-color: aqua; */
        }

        canvas {
            /* background-color: #333; */
        }
    </style>
</head>

<body>
    <div class="box">
        <canvas id="canvas" width="400" height="400"></canvas>

        <SCript>
            let canvas = document.getElementById('canvas')
            // if (!canvas.getContext) return;
            const context = canvas.getContext('2d');

            //给canvas绑定鼠标移动事件 函数
            function drawUp(e) {
                var rect = canvas.getBoundingClientRect();
                //得出此时鼠标在canvas中的坐标
                let checkCoordinate = [e.clientX - rect.x, e.clientY - rect.y]
                draw(checkCoordinate)
            }
            //画出图形 的函数
            function draw(checkCoordinate) {
                context.strokeStyle = 'green';
                context.lineWidth = 5;
                context.moveTo(100, 100);
                context.lineTo(150, 150);
                context.stroke();
                //通过判断 checkCoordinate 是否存在来判断是否给canvas加上 isPointInStroke 事件
                if (checkCoordinate && checkCoordinate.length > 0) {
                    let isPointInPath1 = context.isPointInStroke(checkCoordinate[0], checkCoordinate[1]);
                    console.log("返回： ", isPointInPath1);
                    context.closePath();
                }


            }
            //画出图形 开始
            draw()