vue项目中贝塞尔曲线+canvas绘制两点之间的直线

贝塞尔曲线绘制动态轨迹和canvas绘制两点之间的直线，两种方式，做下记录：

<template>
    <div class="testBeiSaiEr">
        <div class='a'></div>
        <div></div>
        <div class='b'></div>
        <!-- <canvas id="c1" :width="warehousesWidth" :height="warehousesHeight"></canvas> -->
        <div class="drawing-container">
            <canvas id="canvas"></canvas>
        </div>
    </div>
</template>
 
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
 
@Component({ components: {} })
export default class testBeiSaiEr extends Vue {
    name = 'testBeiSaiEr'
 
    mounted() {
        this.$nextTick(() => {
            // this.loadCanvas()
            this.load()
        })
    }
 
    load() {
        var canvas = document.getElementById('canvas') as any
        var ctx = canvas?.getContext('2d')
        // function canvasResize(){
        // 	canvas.width=$(".drawing-container").width();
        // 	canvas.height=$(".drawing-container").height();
        // }
        // canvasResize();
        // $(window).resize(function(){
        // 	canvasResize();
        // });
        /*
	        画动态直线
	        @(x1,y1)    起点
	        @(x2,y2)    终点
        */
        function drawDynamicLine(x1: any, y1: any, x2: any, y2: any) {
            if (x1 == x2) {
                drawVerticalLine(x1, y1, x2, y2) /*斜率不存在的情况*/
            } else {
                drawCommonLine(x1, y1, x2, y2) /*斜率为正或者负或者0*/
            }
            /*k存在的情况*/
            function drawCommonLine(x1: any, y1: any, x2: any, y2: any) {
                //y=kx+b
                var k = (y2 - y1) / (x2 - x1) //斜率k     正 负 0
                var b = y1 - k * x1 //常数b
                var i = 0
                var flag = compare(x1, x2)
 
                function draw() {
                    var xi = x1 + i
                    var yi = k * xi + b
                    var xj = x1 + i + 20 //控制步长决定绘制的是虚线还是实线
                    var yj = k * xj + b
                    drawLine(xi, yi, xj, yj)
                    i += 20 * flag
                    if (Math.abs(i) <= Math.abs(x1 - x2)) {
                        window.setTimeout(function () {
                            draw()
                        }, 50)
                    }
                }
                draw()
            }
 
            /*k不存在，也就是垂直的情况*/
            function drawVerticalLine(x1: any, y1: any, x2: any, y2: any) {
                var i = 0
                var flag = compare(y1, y2)
                function draw() {
                    var yi = y1 + i
                    var yj = y1 + i + 5 * flag
                    drawLine(x1, yi, x2, yj)
                    i += 20 * flag
                    if (Math.abs(i) <= Math.abs(y1 - y2)) {
                        window.setTimeout(function () {
                            draw()
                        }, 50)
                    }
                }
                draw()
            }
 
            /*比较函数*/
            function compare(a: any, b: any) {
                if (a < b) {
                    return 1
                } else {
                    return -1
                }
            }
 
            /*线条片段*/
            function drawLine(x1: any, y1: any, x2: any, y2: any) {
                ctx.beginPath()
                ctx.moveTo(x1, y1)
                ctx.lineTo(x2, y2)
                ctx.lineWidth = 1
                ctx.strokeStyle = 'white'
                ctx.stroke()
                ctx.closePath()
            }
 
            /*清除画布*/
            function clear() {
                ctx.clearRect(0, 0, 800, 800)
            }
        }
 
        drawDynamicLine(10, 10, 400, 10)
        // drawDynamicLine(400, 100, 400, 800)
        // drawDynamicLine(400, 800, 400, 800)
        // drawDynamicLine(400, 800, 100, 800)
        // drawDynamicLine(100, 800, 100, 100)
        // drawDynamicLine(100, 100, 400, 800)
    }
    /** 绘制动态曲线 */
    // loadCanvas() {
    //     const startObj = { x: 0, y: 0 }
    //     // +5 是起点和终点icon小点的宽高一半
    //     startObj.x = 10 + 5
    //     startObj.y = 30 + 5
    //     const endObj = { x: 0, y: 0 }
    //     endObj.x = 100 + 5
    //     endObj.y = 50 + 5
    //     console.log(startObj, endObj)
    //     function animate() {
    //         ctx?.clearRect(0, 0, 2000, 2000)
    //         ctx?.beginPath()
    //         drawCurvePath(ctx, [startObj.x, startObj.y], [endObj.x, endObj.y], 0.2, percent)
    //         ctx?.stroke()
    //         percent = (percent + 1) % 100
    //         requestAnimationFrame(animate)
    //     }
    //     function drawCurvePath(ctx: any, start: any, end: any, curveness: number, percent: number) {
    //         const cp = [(start[0] + end[0]) / 2 - (start[1] - end[1]) * curveness, (start[1] + end[1]) / 2 - (end[0] - start[0]) * curveness]
    //         const t = percent / 100
    //         const p0 = start
    //         const p1 = cp
    //         const p2 = end
    //         const v01 = [p1[0] - p0[0], p1[1] - p0[1]] // 向量<p0, p1>
    //         const v12 = [p2[0] - p1[0], p2[1] - p1[1]] // 向量<p1, p2>
    //         const q0 = [p0[0] + v01[0] * t, p0[1] + v01[1] * t]
    //         const q1 = [p1[0] + v12[0] * t, p1[1] + v12[1] * t]
    //         const v = [q1[0] - q0[0], q1[1] - q0[1]] // 向量<q0, q1>
    //         const b = [q0[0] + v[0] * t, q0[1] + v[1] * t]
    //         ctx.moveTo(p0[0], p0[1])
    //         ctx.quadraticCurveTo(q0[0], q0[1], b[0], b[1])
    //     }
    //     const canvas = document.getElementById('c1') as HTMLCanvasElement
    //     const c2D = canvas.getContext('2d')
    //     if (canvas) {
    //         // @ts-ignore
    //         var ctx = canvas.getContext('2d')
    //         if (ctx) {
    //             ctx.lineWidth = 2
    //             ctx.strokeStyle = '#6696ec'
    //             ctx.beginPath()
    //             var percent = 0
    //             animate()
    //             drawCurvePath(ctx, [5, 10], [endObj.x, endObj.y], 0.4, percent)
    //             ctx.stroke()
    //         }
    //     }
    // }
}
</script>
 
<style lang="scss" scoped>
.testBeiSaiEr {
    width: 500rem;
    height: 500rem;
    border: 0.1rem solid green;
    position: relative;
    margin-left: 5rem;
    .a {
        width: 1rem;
        height: 1rem;
        position: absolute;
        border-radius: 50%;
        background-color: rgb(38, 255, 0);
        left: 10px;
        top: 30px;
    }
    .b {
        width: 1rem;
        height: 1rem;
        position: absolute;
        border-radius: 50%;
        background-color: rgb(162, 0, 255);
        left: 100px;
        top: 50px;
    }
}
.drawing-container {
    width: 100%;
    height: 1000px;
}
 
#canvas {
    display: block;
    background-color: rgb(12, 15, 33);
    // width: 500px;
}
</style>