Vue画线


            // 画线并在线中间展示内容
            // 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();
            },

你可能感兴趣的:(Vue画线)