vue canvas 双直线代码

以下是Vue中绘制两条直线的Canvas代码：

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');

    // 设置画布大小
    canvas.width = 400;
    canvas.height = 400;

    // 绘制第一条直线
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(350, 350);
    ctx.strokeStyle = 'red';
    ctx.stroke();

    // 绘制第二条直线
    ctx.beginPath();
    ctx.moveTo(350, 50);
    ctx.lineTo(50, 350);
    ctx.strokeStyle = 'green';
    ctx.stroke();
  }
}
</script>

在这个例子中，我们先获取到Canvas元素和它的上下文对象。然后设置画布的大小，接着使用`beginPath()`方法开始绘制第一条直线，使用`moveTo()`方法设置起点，`lineTo()`方法设置终点，`strokeStyle`属性设置线条颜色，最后使用`stroke()`方法绘制出直线。同样的方式绘制第二条直线。