uniapp使用createCanvasContext 在canvas中画图形（人体检测使用）

最近在做一个人体检测的项目，需要根据检测坐标在返回的坐标中框出人体，但是uniapp的文档中没有详细说明，所以做了一个小demo，在以后有合适的模型来部署的时候可以用在相机的画布上框出人体。

如图:

代码:

<template>
  <view>
	  <canvas canvas-id="canvas" id="canvas">
		  
	  </canvas> 
  </view>
</template>

<script>
export default {
  mounted() {
    const ctx = uni.createCanvasContext('canvas')
	// 设置边框颜色为蓝色
	ctx.strokeStyle = 'blue' 
    ctx.rect(50, 50, 200, 300) 
    ctx.stroke()
    ctx.draw() 
  },
  
}
</script>

<style>
	canvas {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	
	}
</style>

附上文档连接：

常用方法:

• rect(x, y, width, height) - 绘制矩形
• fillRect(x, y, width, height) - 填充矩形
• clearRect(x, y, width, height) - 清除矩形区域
• strokeRect(x, y, width, height) - 矩形描边
• fill() - 对当前路径中的内容进行填充
• stroke() - 对当前路径进行描边
• beginPath() - 开始一个路径
• moveTo(x, y) - 把路径移动到指定的点
• lineTo(x, y) - 添加一个新点,然后创建一条从上次指定点到目标点的线
• closePath() - 创建从当前点回到起始点的路径
• setFillStyle(color) - 设置填充颜色
• setStrokeStyle(color) - 设置描边颜色
• setLineWidth(width) - 设置线条宽度
• setLineCap(lineCap) - 设置线条端点样式
• setLineJoin(lineJoin) - 设置线段交点样式
• setShadow(offsetX, offsetY, blur, color) - 设置阴影效果
• drawImage(imageResource, x, y, width, height) - 绘制图像
• setTextAlign(align) - 设置文字对齐方式
• fillText(text, x, y) - 绘制填充文字
• strokeText(text, x, y) - 绘制描边文字
• measureText(text) - 测量文字宽度
• draw() - 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中