记录canvas线条模糊问题解决方案

模糊原因有两种：设置的尺寸不一致；屏幕像素比大于1。

画布尺寸：canvas的width、height属性，默认值分别为300px、150px。 画板尺寸：css样式设置的width、height

如果设置了画布尺寸，未设置画板尺寸，或者两者都未设置，那么画板尺寸随画布尺寸改变。
但若设置了画板尺寸，而未设置画布尺寸，或者分别设置了，那么画板尺寸将不再随画布尺寸而改变。 如果两者设置的尺寸不一样时，就会产生一个问题，渲染时画布要通过缩放来使其与画板尺寸一样，那么画布上已经绘制好的图形也会随之缩放，随之导致变形失真。

canvas绘制的图形是位图，即栅格图像或点阵图像，当将它渲染到高清屏时，会被放大，每个像素点会用devicePixelRatio的平方个物理像素点来渲染，因此图片会变得模糊。

<canvas
    class="canvas"
    :width="data.width"
    :height="data.height"
    canvas-id="firstCanvas"
    id="firstCanvas"
  ></canvas>

let canvas = document.getElementById("firstCanvas");

if (canvas.getContext) {

    let ctx = canvas.getContext("2d");

    // 根据设备的像素比来设置canvas的大小

    const dpr = window.devicePixelRatio;

    canvas.width = data.width * dpr;

    canvas.height = data.height * dpr;

    canvas.style.width = data.width + "px";

    canvas.style.height = data.height + "px";

    ctx.scale(dpr, dpr);

    // drawing code here

    ctx.clearRect(0, 0, data.width, data.height);
}