canvas失帧模糊原因及解决方法

原因

移动端或者高清屏幕dpr问题

解决方法

<canvas class="chart" ref="chartRef_1" :width="px2fix(35)" :height="px2fix(35)"></canvas>
const setupCanvas = (canvas: HTMLCanvasElement) => {
    
    
  const dpr = window.devicePixelRatio || 1;
  const rect = canvas.getBoundingClientRect();
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
  ctx?.scale(dpr, dpr);
  return ctx;
};

// tool.ts
export function px2rem(px: number, sw?: number) {
    
    
    const _sw = sw || 375
    const sreenWidth = window.screen.width
    return px * sreenWidth / _sw
}

借鉴

猜你喜欢

转载自blog.csdn.net/qq_44900902/article/details/129355321