uniapp Nvue canvas绘图插件有没有?

Question

uniapp Nvue canvas绘图插件

Answer 1

<template>
  <view class="container">
    <!-- Canvas 容器 -->
    <canvas
      id="myCanvas"
      class="canvas"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
    ></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      canvasWidth: 300, // Canvas 宽度
      canvasHeight: 300, // Canvas 高度
    };
  },
  mounted() {
    this.drawCanvas();
  },
  methods: {
    drawCanvas() {
      // 获取 Canvas 上下文
      const canvas = uni.createCanvasContext('myCanvas', this);

      // 设置背景颜色
      canvas.fillStyle = '#f0f0f0';
      canvas.fillRect(0, 0, this.canvasWidth, this.canvasHeight);

      // 绘制矩形
      canvas.fillStyle = '#007AFF';
      canvas.fillRect(50, 50, 200, 100);

      // 绘制文本
      canvas.font = '20px Arial';
      canvas.fillStyle = '#000000';
      canvas.fillText('Hello, NVue Canvas!', 50, 200);

      // 绘制圆形
      canvas.beginPath();
      canvas.arc(150, 250, 30, 0, 2 * Math.PI);
      canvas.fillStyle = '#FF3B30';
      canvas.fill();

      // 渲染
      canvas.draw();
    },
  },
};
</script>

<style scoped>
.container {
  flex: 1;
  justify-content: center;
  align-items: center;
}

.canvas {
  background-color: #ffffff;
}
</style>