Vue实现画布网格

<template>
      <div>
        <canvas ref="canvas" width="800" height="600"></canvas>
      </div>
</template>
<script>
export default {
  name: 'Canvas',
  computed: {
  },
  components:{
  },
  mounted() {
  const canvas = this.$refs.canvas
  const context = canvas.getContext("2d")
  // 绘制网格
  context.strokeStyle = "#ccc";
  for (let i = 10; i < canvas.width; i += 10) {
    context.beginPath();
    context.moveTo(i, 0);
    context.lineTo(i, canvas.height);
    context.stroke();
  }
  for (let i = 10; i < canvas.height; i += 10) {
    context.beginPath();
    context.moveTo(0, i);
    context.lineTo(canvas.width, i);
    context.stroke();
  }
}
}
</script>
<style lang="scss" scoped>
</style>