问题描述

当我们使用canvas进行绘制粗线条和圆形时，可能会出现边缘锯齿，如果你使用的是mac或者其他高分辨率的屏幕，这种感觉会尤为明显，如下图所示：

原因

canvas有两个宽高，一个是画布实际的像素宽高，一个是画布在页面所展示的CSS宽高，当我们只设置了画布实际的像素宽高时，画布的CSS宽高会默认相同，如果你的屏幕分辨率较高，在canvas所显示的区域中的像素数量大于canvas的实际像素时，在上面进行绘制就会产生锯齿感（这相当于放大了canvas）

解决办法

获取屏幕的物理像素分辨率与CSS像素分辨率之比（dpi）
设置canvas的CSS宽高
设置canvas的实际宽高等于CSS宽高乘dpi

  const scale = window.devicePixelRatio
  const size = 400
  canvas.style.width = size + 'px'
  canvas.style.height = size + 'px'
  canvas.value.width = Math.floor(size * scale)
  canvas.value.height = Math.floor(size * scale)

canvas绘制锯齿问题

问题描述

原因

解决办法