1

pages/index/index.vue

@@ -1,7 +1,9 @@
 <template>
 	<view>
 		<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
-		<canvas canvas-id="canvas" id="canvas" style="width: 200px; height: 200px;border: 1px solid red;" :width="canvasWidth" :height="canvasHeight"></canvas>
+		<canvas
+			 @touchstart="handleCanvasTouch"
+		 canvas-id="canvas" id="canvas" style="border: 1px solid red;height: 600px;width: 100vw;"></canvas>
 
 		<!-- 添加一个按钮，用于触发绘图 -->
 		<button @click="handleDraw">点击绘制圆形</button>
@@ -9,36 +11,54 @@
 </template>
 
 <script setup>
-	import { ref, onMounted ,getCurrentInstance } from 'vue'
+	import {
+		ref,
+		onMounted,
+		getCurrentInstance
+	} from 'vue'
 
-	const canvasWidth = ref(200)  // 动态设置Canvas宽度
+	const canvasWidth = ref(375) // 动态设置Canvas宽度
-	const canvasHeight = ref(200) // 动态设置Canvas高度
+	const canvasHeight = ref(400) // 动态设置Canvas高度
 	const instance = getCurrentInstance()
-	// 定义绘图函数
-	function draw() {
-		const ctx = uni.createCanvasContext('canvas',instance) // 创建canvas绘图上下文
-		console.log(ctx,'12');
-		// 绘制外圆
-		ctx.beginPath() // 开始路径
-		ctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形
-		ctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度
-		ctx.fill() // 填充所创建的路径
 
-		// 绘制内圆以形成环形效果
+
-		ctx.beginPath() // 开始新的路径
+	async function draw() {
-		ctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形
+		const imgUrl = "https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg"
-		ctx.setFillStyle('white') // 设置填充颜色为白色
+		const ctx = uni.createCanvasContext('canvas', instance) // 创建canvas绘图上下文
-		ctx.fill() // 填充以“清除”内部区域，形成环形
+		const res = await uni.getImageInfo({
+			src: imgUrl,
+		})
+
+		ctx.drawImage(res.path, 0, 0);
+		ctx.beginPath();
+		ctx.moveTo(50, 50); // 左下角点
+		ctx.lineTo(150, 50); // 右下角点
+		ctx.lineTo(200, 100); // 右上角点
+		ctx.lineTo(100, 100); // 左上角点
+		ctx.closePath(); // 闭合路径
+		ctx.stroke(); // 绘制边框
+
 		ctx.draw()
 	}
 	
+		// 处理canvas触摸事件
+		function handleCanvasTouch(event) {
+			// 获取触摸点的坐标
+			const x = event.touches[0].x;
+			const y = event.touches[0].y;
+			console.log(x,y,'12');
+		
+		}
+
+	
+	
 	// 按钮点击事件处理函数
 	const handleDraw = () => {
 		draw(); // 调用绘图函数
 	}
 
 	onMounted(() => {
-		// draw()
+		draw()
 		// 确保在组件挂载后可以获取到Canvas元素
 	})
 </script>

pages/index/indexclick.vue

@@ -0,0 +1,125 @@
+<template>
+	<view>
+		<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
+		<canvas @touchstart="handleCanvasTouch" canvas-id="canvas" id="canvas"
+			style="border: 1px solid red;height: 600px;width: 100vw;"></canvas>
+
+		<!-- 添加一个按钮，用于触发绘图 -->
+		<button @click="handleDraw">点击绘制圆形</button>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted,
+		getCurrentInstance
+	} from 'vue'
+
+	const canvasWidth = ref(375) // 动态设置Canvas宽度
+	const canvasHeight = ref(400) // 动态设置Canvas高度
+	const instance = getCurrentInstance()
+	// 定义绘图函数
+	const blocks = ref([{
+			x: 50,
+			y: 50,
+			width: 100,
+			height: 100,
+			color: 'red',
+			message: '点击了红色方块'
+		},
+		{
+			x: 200,
+			y: 50,
+			width: 100,
+			height: 100,
+			color: 'blue',
+			message: '点击了蓝色方块'
+		},
+		{
+			x: 50,
+			y: 200,
+			width: 100,
+			height: 100,
+			color: 'green',
+			message: '点击了绿色方块'
+		},
+		{
+			x: 200,
+			y: 200,
+			width: 100,
+			height: 100,
+			color: 'yellow',
+			message: '点击了黄色方块'
+		},
+		{
+			x: 350,
+			y: 50,
+			width: 100,
+			height: 100,
+			color: 'purple',
+			message: '点击了紫色方块'
+		},
+	])
+
+	async function draw() {
+		const imgUrl = "https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg"
+		const ctx = uni.createCanvasContext('canvas', instance) // 创建canvas绘图上下文
+		const res = await uni.getImageInfo({
+			src: imgUrl,
+		})
+		console.log(res, 'res');
+		ctx.drawImage(res.path, 0, 0, canvasWidth.value, canvasHeight.value);
+
+		// 定义5个方块的颜色和位置
+
+		// 绘制每个方块
+		blocks.value.forEach((block) => {
+			ctx.beginPath();
+			ctx.fillStyle = block.color;
+			ctx.rect(block.x, block.y, block.width, block.height);
+			ctx.fill();
+		});
+		ctx.draw()
+	}
+	// 处理canvas触摸事件
+	function handleCanvasTouch(event) {
+		// 获取触摸点的坐标
+		const x = event.touches[0].x;
+		const y = event.touches[0].y;
+		// 定义5个方块的颜色和位置
+
+		// 判断点击位置
+		blocks.value.forEach((block) => {
+			if (x >= block.x && x <= block.x + block.width && y >= block.y && y <= block.y + block.height) {
+				uni.showModal({
+					title: '提示',
+					content: block.message,
+					showCancel: true, // 显示取消按钮
+					success: (res) => {
+						if (res.confirm) {
+							console.log('用户点击了“确定”按钮');
+						} else if (res.cancel) {
+							console.log('用户点击了“取消”按钮');
+						}
+					},
+				});
+			}
+		});
+	}
+	// 按钮点击事件处理函数
+	const handleDraw = () => {
+		draw(); // 调用绘图函数
+	}
+
+	onMounted(() => {
+		draw()
+		// 确保在组件挂载后可以获取到Canvas元素
+	})
+</script>
+
+<style scoped>
+	button {
+		margin-top: 10px;
+	}
+</style>