vue中canvas抗锯齿

在Vue中使用canvas时，可以通过以下两种方式抗锯齿：

1. 设置canvas的宽高为实际的两倍，并使用CSS将其缩小一半。这样可以使canvas的像素密度提高，从而达到抗锯齿的效果。

<template>
  <canvas ref="canvas" style="width: 100%; height: 100%; transform: scale(0.5);"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')
    const dpr = window.devicePixelRatio || 1
    const rect = canvas.getBoundingClientRect()
    canvas.width = rect.width * dpr * 2
    canvas.height = rect.height * dpr * 2
    ctx.scale(dpr, dpr)
    // 绘制图形
  }
}
</script>

2. 使用ctx.imageSmoothingEnabled属性进行抗锯齿设置。将其设置为true即可开启抗锯齿效果。

<template>
  <canvas ref="canvas" style="width: 100%; height: 100%;"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')
    ctx.imageSmoothingEnabled = true
    // 绘制图形
  }
}
</script>