uniapp 操作canvas画布画红色的矩形

好的，以下是Uniapp中操作canvas画布画红色矩形的代码示例：

<template>
  <canvas id="myCanvas" style="width: 100%; height: 100%;"></canvas>
</template>

<script>
  export default {
    mounted() {
      const ctx = uni.createCanvasContext('myCanvas', this);

      ctx.fillStyle = 'red'; // 设置填充颜色为红色
      ctx.fillRect(50, 50, 100, 100); // 画一个矩形，左上角坐标为 (50, 50)，宽高分别为 100

      ctx.draw(); // 绘制canvas
    },
  };
</script>

在这个示例中，我们首先在模板中放置一个canvas标签，并设置其id为"myCanvas"。在mounted生命周期中，我们通过`uni.createCanvasContext()`方法创建了一个2D渲染上下文对象，并将其赋值给`ctx`变量。

接着，我们通过`ctx.fillStyle`属性将填充颜色设置为红色，然后调用`ctx.fillRect()`方法画出一个左上角坐标为(50,50)，宽高均为100的矩形。

最后，我们调用`ctx.draw()`方法将画布绘制出来。这样，我们就成功地在canvas画布上画出了一个红色的矩形。

相关问题

uniapp canvas 怎么把当前画布上的内容转为base64

要将当前画布上的内容转换为base64，你可以使用uniapp中的canvas api中的toDataURL()方法。该方法可以将canvas画布上的内容转换为base64格式的字符串。

以下是示例代码：

// 获取canvas元素
const canvas = uni.createCanvasContext('myCanvas')

// 在canvas上绘制图形
canvas.rect(0, 0, 100, 100)
canvas.setFillStyle('red')
canvas.fill()

// 将canvas内容转为base64
canvas.toDataURL({
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  destWidth: 100,
  destHeight: 100,
  fileType: 'png',
  quality: 1,
  success(res) {
    console.log(res.data) // 打印出转换后的base64字符串
  }
})

在以上示例代码中，我们首先获取了canvas元素，并在canvas上绘制了一个红色矩形。然后我们调用canvas的toDataURL()方法将canvas内容转换为base64格式的字符串，并打印输出结果。你可以根据自己的需求修改相关参数。

uniapp vue3 清除画布

在uniapp中使用Vue3时，如果你需要在使用Canvas进行绘图后清除画布内容，可以通过调用Canvas的API来实现。这通常涉及到清除画布上的所有绘制内容，使之变为空白状态。以下是一个基本的操作步骤：

1. 获取Canvas上下文：首先，你需要通过`<canvas>`标签获取到它的2D渲染上下文，这可以通过调用`getContext`方法并传入`'2d'`来实现。

2. 调用清除方法：获取到Canvas上下文后，可以使用`.clearRect`方法来清除画布上的内容。这个方法接受四个参数：要清除的矩形区域的x坐标、y坐标、矩形区域的宽度和高度。如果要清除整个画布，x和y坐标为0，宽度和高度为Canvas的宽度和高度。

3. 设置新的绘图状态：清除画布之后，你可以根据需要重新设置Canvas的状态，如变换、样式等，然后开始新的绘图操作。

示例代码：

<template>
  <canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>
</template>

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

onMounted(() => {
  const canvas = uni.createCanvasContext('myCanvas', this);
  // 设置绘图状态，如样式、变换等
  // ... (此处省略绘图代码)

  // 绘制完成后，清除画布
  canvas.clearRect(0, 0, 300, 200);
  
  // 如果需要，可以在这里继续绘制新的内容
  // ... (此处省略新的绘图代码)
  
  // 将绘制结果渲染到画布上
  canvas.draw();
});
</script>

在上面的代码中，`uni.createCanvasContext`方法用于获取Canvas的绘图上下文，并在所有绘图操作完成之后，使用`clearRect`方法来清除画布上的内容。最后通过`draw`方法将新的绘制内容渲染到画布上。