贝塞尔曲线绘制动态轨迹和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();
// });
/*
画动态直线
@