在uniapp中的canvas里画一个矩形并设置背景色

在UniApp中，使用H5渲染层的Canvas API，你可以很容易地在页面上创建一个矩形并设置其背景色。首先，你需要在uni-app项目中引入Vue的`uni.createSelectorQuery`方法来选择和操作Canvas元素。以下是一个简单的例子：

<template>
  <view class="container">
    <canvas id="myCanvas" @touchstart="handleTouchStart"></canvas>
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchStart(e) {
      const query = uni.createSelectorQuery()
      query.select('#myCanvas').boundingClientRect((rect) => {
        this.canvasWidth = rect.width;
        this.canvasHeight = rect.height;

        // 初始化画布 context
        const ctx = uni.canvasContext('myCanvas');

        // 设置背景色
        ctx.fillStyle = '#FF0000'; // 例如这里设定为红色

        // 画矩形
        ctx.beginPath();
        ctx.rect(0, 0, this.canvasWidth, this.canvasHeight);
        ctx.fill();
      });
    }
  }
}
</script>

<style scoped>
.container {
  position: relative;
}
</style>

在这个例子中，当用户触摸屏幕时，会触发`handleTouchStart`方法。这个方法会选择ID为`myCanvas`的Canvas元素，并获取其尺寸信息。然后它会创建一个绘图上下文`ctx`，设置背景颜色为红色，接着画出整个canvas区域的矩形。