Vue画线

<canvas id="canvas" width="400" height="400" style="border: 1px solid #ccc;"></canvas>
            // 画线并在线中间展示内容
            // let canvas = this.$ref.canvas
            // let cavParam = canvas.getContext('2d')
            setAndPoint(cavParam, txt, fromX, fromY, toX, toY, color, lineWidth) {
                cavParam.beginPath();
                cavParam.moveTo(fromX, fromY);
                cavParam.lineTo(toX, toY);
                cavParam.lineWidth = lineWidth
                let plusOrMinus = Math.random() < 0.5 ? -1 : 1
                let textPosition = {
                    x: (fromX + toX) / 2 + parseInt(Math.random() * 25 + 1) * plusOrMinus,
                    y: (fromY + toY) / 2 + parseInt(Math.random() * 25 + 1) * plusOrMinus,
                }
                cavParam.font = "16px"
                cavParam.strokeStyle = color
                cavParam.fillText(txt, textPosition.x, textPosition.y)
                cavParam.beginPath();
            },