Uni-App通过canvas点点绘制直线，可跟随手机滑动

Uni-App通过canvas点点绘制直线，可跟随手机滑动

<template>
	<view class="countStyle">
		<scroll-view scroll-x scroll-y>
			<view class="bgimg" :style="{ 'background-image': 'url(' + imager + ')' }">
				<canvas canvas-id="firstCanvas" id="firstCanvas" class="cansStyle" />
			</view>
		</scroll-view>
	</view>
</template>
<script setup>
	import { ref, onMounted } from 'vue';
	import config from '@/config';
	import { onLoad } from "@dcloudio/uni-app";

	import * as PT from './canvasConfig.js'

	const imager = ref(config.config.baseUrl + '/wximages/menu/unloadWork.png');

	const context = uni.createCanvasContext('firstCanvas');

	const points = ref([
		{ x: 110, y: 130 },
		{ x: 205, y: 130 },
		{ x: 205, y: 145 },
		{ x: 230, y: 145 }

	])


	onMounted(() => {
		drawPolyline();
	});

	function drawPolyline() {
		context.setStrokeStyle("#ffff00");
		context.setLineWidth(5);

		context.moveTo(points.value[0].x, points.value[0].y);

		for (let i = 1; i < points.value.length; i++) {
			context.lineTo(points.value[i].x, points.value[i].y);
		}

		context.stroke();
		context.draw();
	}
</script>
<style lang="scss" scoped>
	.countStyle {
		overflow: auto;
	}

	.bgimg {
		height: 600px;
		width: 450px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.cansStyle {
		height: 600px;
		width: 450px;
	}
</style>