GCLS_Page_Learn/src/views/canvas/index.vue

<template>
  <div class="canvas-wrap">
    <canvas ref="whiteboard" width="920" height="520"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { paintData } from './data';

const whiteboard = ref(null);

function paint() {
  let context = whiteboard.value.getContext('2d');
  paintData.forEach(({ action, value }) => {
    if (action !== 'draw') return;
    const { fileName, data } = value;
    if (fileName !== 'WhiteBorad') return;
    const { color: color16, thickness, type, draw, width, height } = data;
    // 将十进制的颜色，转为十六进制
    let color = Number(color16).toString(16);
    color = `#${color.length < 6 ? '0'.repeat(6 - color.length) : ''}${color}`;
    if (draw.length <= 0) return;

    context.beginPath();
    context.moveTo(width * draw[0].x, height * draw[0].y);
    if (type === 10) {
      context.lineWidth = (3 * 2 * (thickness * width)) / (draw[0].ppt_width || 1295);
    } else {
      context.lineWidth = (thickness * width) / (draw[0].ppt_width || 1295);
    }
    context.lineJoin = 'round';
    context.strokeStyle = type === 10 ? '#fff' : color;
    draw.forEach(({ x, y }) => {
      context.lineTo(width * x, height * y);
    });
    context.stroke();
  });
}

onMounted(() => {
  paint();
});
</script>

<style lang="scss" scoped>
.canvas-wrap {
  width: 922px;
  height: 522px;
  margin: 0 auto;
  margin-top: 200px;
  border: 1px solid #ccc;

  canvas {
    position: relative;
    z-index: 9999;
    display: block;
  }
}
</style>