原因
移动端或者高清屏幕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
}