解决canvas不清晰

1、下载插件

npm i hidpi-canvas

2、直接梭

    let canvas = this.$refs.luckydraw;   //canvas的dom
    const ctx = ctxDom.getContext("2d");
    /*
    *window.devicePixelRatio 是设备上物理像素和设备独立像素的比例，
    即公式表示为：window.devicePixelRatio = 物理像素 / dips。
    *物理像素（physical pixel）：设备能控制显示的最小单位
    *设备独立像素（device-independent pixel）：独立于设备的用于逻辑上衡量像素的单位
    *每英寸像素量（pixels per inch）：一英寸长度上可以并排的像素数量
    */
    
    var devicePixelRatio = window.devicePixelRatio || 1;
    var backingStoreRatio =
      ctx.webkitBackingStorePixelRatio ||
      ctx.mozBackingStorePixelRatio ||
      ctx.msBackingStorePixelRatio ||
      ctx.oBackingStorePixelRatio ||
      ctx.backingStorePixelRatio ||
      1;
    var ratio = devicePixelRatio / backingStoreRatio; //设备像素比
    
    /*
    *将 canvas 的高和宽分别乘以 ratio 将其放大，
    *然后再用 css 将其样式高和宽限制成初始的大小。
    */
    canvas.style.width = canvas.width + "px";
    canvas.style.height = canvas.height + "px";
    canvas.width = canvas.width * ratio;
    canvas.height = canvas.height * ratio;
    ctx.scale(ratio, ratio);
    ctx.translate(0.5, 0.5);

下面这个就是处理过后的canvas，懂的都懂

<canvas data-v-20f1cd57="" width="738" height="738" class="luckydraw" style="width: 246px; height: 246px;"></canvas>