用vue写一个水墨画代码

以下是一个简单的水墨画代码示例：

HTML:

<canvas id="canvas"></canvas>

JavaScript:

new Vue({
  el: '#canvas',
  mounted() {
    const canvas = this.$el;
    const ctx = canvas.getContext('2d');

    // 设置画布大小
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 设置画笔属性
    ctx.lineWidth = 3;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';

    // 监听鼠标事件
    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;

    function draw(e) {
      if (!isDrawing) return;
      ctx.beginPath();
      ctx.moveTo(lastX, lastY);
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
      [lastX, lastY] = [e.offsetX, e.offsetY];
    }

    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mousedown', (e) => {
      isDrawing = true;
      [lastX, lastY] = [e.offsetX, e.offsetY];
    });
    canvas.addEventListener('mouseup', () => isDrawing = false);
    canvas.addEventListener('mouseout', () => isDrawing = false);
  }
});

这个示例使用 Vue.js 框架编写了一个简单的水墨画程序。在程序中，我们首先创建了一个 canvas 元素，并使用 Vue.js 将其绑定到页面上。然后，我们在 Vue 实例的 mounted 钩子中获取了 canvas 的上下文对象，设置了画布大小和画笔属性，并监听了鼠标事件，以便在画布上绘制水墨画。在鼠标移动事件中，我们使用 moveTo 和 lineTo 方法绘制一条直线，然后使用 stroke 方法将其渲染到画布上。