一文详解为何在Vue3中uni.createCanvasContext画不出canvas

<GestureCheckIn @confirm="handleGestureSubmit" />

ctx = uni.createCanvasContext('gestureCanvas')

// 在 Vue 3 组件中，这样写会导致找不到 Canvas 上下文
ctx = uni.createCanvasContext('gestureCanvas') 

import { getCurrentInstance, onMounted } from 'vue'

// 获取当前组件实例
const instance = getCurrentInstance()
onMounted(() => {
  // 必须将 instance 传进去！
  ctx = uni.createCanvasContext('gestureCanvas', instance)
  if (ctx) {
     draw() 
  }
})

// 绘制连线逻辑
if (selectedIndices.length > 0) {
  ctx.beginPath() // 必须开启新路径，否则会和圆点的绘制混在一起
  
  // 1. 移动画笔到第一个选中的点
  const startPoint = points[selectedIndices[0]]
  ctx.moveTo(startPoint.x, startPoint.y)
  
  // 2. 遍历后续所有已选中的点，将它们连起来
  for (let i = 1; i < selectedIndices.length; i++) {
    const p = points[selectedIndices[i]]
    ctx.lineTo(p.x, p.y)
  }
  
  // 3. 【关键】如果是正在触摸状态，画一条线到当前手指的位置
  // 这就是为什么手势看起来像在“拉橡皮筋”
  if (isDrawing) {
    ctx.lineTo(currentPos.x, currentPos.y)
  }
  
  // 4. 样式设置（改为蓝色主题 #007AFF）
  ctx.setStrokeStyle('#007AFF') 
  ctx.setLineWidth(6)
  
  // 5. 【细节】让线条拐角和端点变得圆润，防止出现锯齿或尖角
  ctx.setLineCap('round') 
  ctx.setLineJoin('round')
  
  ctx.stroke()
}

<template>
  <view class="gesture-container">
    <canvas canvas-id="gestureCanvas" id="gestureCanvas" class="gesture-canvas" @touchstart="start" @touchmove="move"
      @touchend="end"></canvas>
    <view class="action">
      <button @click="reset">重设手势</button>
      <text class="debug-info">{{ debugInfo }}</text>
    </view>
  </view>
</template>

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

// 定义颜色常量
const themeColor = '#007AFF'
const themeColorDark = '#005BBB' 

const instance = getCurrentInstance()
const emit = defineEmits(['confirm'])

let ctx = null
const debugInfo = ref('等待初始化...')

// 基础样式配置
const canvasWidth = 300
const canvasHeight = 300
const r = 25

// 状态
let isDrawing = false
let points = []
let selectedIndices = []
let currentPos = { x: 0, y: 0 }

onMounted(() => {
  setTimeout(() => {
    ctx = uni.createCanvasContext('gestureCanvas', instance)

    if (ctx) {
      initPoints()
      draw()
    }
  }, 200)
})

const initPoints = () => {
  points = []
  const padding = 50
  const stepX = (canvasWidth - 2 * padding) / 2
  const stepY = (canvasHeight - 2 * padding) / 2

  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
      points.push({
        x: padding + j * stepX,
        y: padding + i * stepY,
        index: i * 3 + j
      })
    }
  }
  debugInfo.value = '请绘制手势密码（至少连接4个点）'
}

const draw = () => {
  if (!ctx) {
    return
  }

  ctx.clearRect(0, 0, canvasWidth, canvasHeight)

  points.forEach((p, index) => {
    // 绘制外圆路径
    ctx.beginPath()
    ctx.arc(p.x, p.y, r, 0, Math.PI * 2)
    ctx.setLineWidth(3)
    ctx.setStrokeStyle(themeColor)

    if (selectedIndices.includes(index)) {
      // 选中状态：绘制外圈边框 + 内部实心圆点
      ctx.stroke()

      ctx.beginPath()
      ctx.arc(p.x, p.y, r / 3.5, 0, Math.PI * 2)
      // 选中时的内部实心圆点
      ctx.setFillStyle(themeColor)
      ctx.fill()
    } else {
      // 未选中状态：白色填充 + 边框
      ctx.setFillStyle('#ffffff')
      ctx.fill()
      ctx.stroke()
    }
  })

  // 绘制连线
  if (selectedIndices.length > 0) {
    ctx.beginPath()
    const startPoint = points[selectedIndices[0]]
    ctx.moveTo(startPoint.x, startPoint.y)
    for (let i = 1; i < selectedIndices.length; i++) {
      const p = points[selectedIndices[i]]
      ctx.lineTo(p.x, p.y)
    }
    if (isDrawing) {
      ctx.lineTo(currentPos.x, currentPos.y)
    }
    // 连线颜色改为蓝色
    ctx.setStrokeStyle(themeColor)
    ctx.setLineWidth(6)
    ctx.setLineCap('round')
    ctx.setLineJoin('round')
    ctx.stroke()
  }

  ctx.draw()

  if (selectedIndices.length > 0) {
    debugInfo.value = `已连接 ${selectedIndices.length} 个点`
  }
}

const getPosition = (e) => {
  if (!e.touches || !e.touches[0]) {
    return { x: 0, y: 0 }
  }
  // 增加兼容性处理，防止部分环境 e.touches[0] 不包含 x, y
  const touch = e.touches[0]
  return {
    x: touch.x || touch.clientX,
    y: touch.y || touch.clientY
  }
}

const start = (e) => {
  isDrawing = true
  selectedIndices = []
  const pos = getPosition(e)
  currentPos = pos
  checkCollision(pos)
  draw()
}

const move = (e) => {
  if (!isDrawing) return
  const pos = getPosition(e)
  currentPos = pos
  checkCollision(pos)
  draw()
}

const end = (e) => {
  isDrawing = false
  draw()

  if (selectedIndices.length >= 4) {
    const pattern = selectedIndices.join('')
    emit('confirm', pattern)
    debugInfo.value = `手势已确认`
  } else if (selectedIndices.length > 0) {
    debugInfo.value = `至少需要连接 4 个点（已连接 ${selectedIndices.length} 个）`
    setTimeout(() => {
      reset()
    }, 1500)
  }
}

const checkCollision = (pos) => {
  points.forEach((p, i) => {
    const dx = pos.x - p.x
    const dy = pos.y - p.y
    const distance = Math.sqrt(dx * dx + dy * dy)
    if (distance < r && !selectedIndices.includes(i)) {
      selectedIndices.push(i)
    }
  })
}

const reset = () => {
  selectedIndices = []
  isDrawing = false
  currentPos = { x: 0, y: 0 }
  draw()
  debugInfo.value = '请绘制手势密码（至少连接4个点）'
}
</script>

<style lang="scss" scoped>
// 定义 CSS 变量以便样式中使用
$theme-color: #007AFF;
$theme-color-dark: #005BBB;
$theme-shadow-light: rgba(0, 122, 255, 0.1);
$theme-shadow-medium: rgba(0, 122, 255, 0.2);

.gesture-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  border-radius: 24rpx;
}

.gesture-canvas {
  width: 300px;
  height: 300px;
  background: #ffffff;
  border: 2px solid $theme-color;
  border-radius: 12px;
  box-shadow: 0 2px 8px $theme-shadow-light;
}

.action {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  button {
    padding: 12px 30px;
    background: $theme-color;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 2px 6px $theme-shadow-medium;

    &:active {
      background: $theme-color-dark;
    }
  }

  .debug-info {
    font-size: 13px;
    color: $theme-color;
    text-align: center;
  }
}
</style>