用JS的Canvas API画一条1px的线(使用缩放scale，位移translate)

在HTML中，可以使用Canvas API来绘制线条。

我们可以通过设置线宽和颜色来绘制10px的线。接下来，通过调用Canvas的transform方法实现缩放和位移，达到缩放0.83和位移0.5px的效果。

代码示例：

1. 创建一个Canvas元素。

2. 获取Canvas的2D绘图上下文。

3. 设置线宽为1px。

4. 应用缩放和位移变换。

5. 绘制线条。

本例中楼主犯了vue中的一个错误，就是没有在dom组件渲染完成以后再调用js中的获取dom组件

报错信息：代码在 Vue 中报错是因为在 <script setup> 中直接使用 document.getElementById("myCanvas") 来获取 DOM 元素，这在 Vue 的生命周期中是不安全的。

正确的做法：Vue 会在模板渲染完成后才挂载 DOM 元素，因此需要在 onMounted 生命周期钩子中操作 DOM。

<template>
  <div class="fa">
    <!-- <div class="ch"></div> -->
    <canvas
      id="myCanvas"
      width="500"
      height="500"
      style="border: 1px solid #000000"
    ></canvas>
  </div>
</template>

错误代码：
<script setup>
//这样是不安全的
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext('2d');
context.beginPath();
context.moveTo(50, 50); // 起点
context.lineTo(450, 50); // 终点
context.lineWidth = 10; // 线宽
context.stroke(); // 绘制
</script>

正确代码：
<script setup>
import { onMounted } from "vue"; // 导入生命周期钩子

onMounted(() => {
  const canvas = document.getElementById("myCanvas"); // 获取 canvas 元素
  if (canvas) {
    const context = canvas.getContext("2d"); // 获取 2D 上下文
    if (context) {
      context.beginPath();
      context.moveTo(50, 50); // 起点
      context.lineTo(450, 50); // 终点
      context.translate(0.5, 0); // 应用位移
      context.scale(0.83, 1); // 应用缩放
      context.lineWidth = 1;
      context.stroke(); //绘制
    } else {
      console.error("Canvas context is null");
    }
  } else {
    console.error("Canvas element not found");
  }
});
</script>