Uni-app开发Canvas当子组件示例，点点绘制图形

前言

使用Uni-app 实现封装一个Canvas渲染的子组件，实现通过传入两点绘制一条完整的路程
具体逻辑看我发的后端和数据库设计
C# 根据两点名称，寻找两短路程的最优解，【有数据库设计，完整代码】

即使不了解具体逻辑，该文章同样可以帮助想要实现使用Canvas当子组件，以及点点绘制图形问题的疑惑

注意事项

问题一：在使用canvas开发时为什么图形没有渲染

1.注意画布的尺寸canvas 标签默认宽度300px、高度150px
2.同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作

问题二：为什么当子组件时Canvas渲染不出来

1.没有写canvas-id
2.uni.createCanvasContext方法没有传入组件实例（单独作为组件引入时,vue2为this,vue3为getCurrentInstance（））
3.canvas标签上写了type=“2d”（单独作为组件引入时）
4.没有在onReady或者onMounted生命周期里实列话canvas

问题三：渲染图形怎么变图片

使用wx.canvasToTempFilePath来让图形变成图片**

注意：
1.canvas使用的不同，使用传入的值也不同

2.使用Vue3开发时，没有this时，使用getCurrentInstance获取全局的属性和获取上下文

Uni-app代码

子组件

<template>
	<view class="countStyle">
		<scroll-view scroll-x scroll-y>
			<view class="bgimg" :style="{ 'background-image': 'url(' + imager + ')' }">
				<canvas v-if="!tempImagePath" canvas-id="firstCanvas" id="firstCanvas" class="cansStyle" />
				<image v-if="tempImagePath" :src="tempImagePath" class="overlay-image" />
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
    ref, onMounted, getCurrentInstance } from 'vue';
	import config from