深入了解canvas在移动端绘制模糊的问题解决

问题描述

在移动端使用 canvas 绘图时，经常会出现绘制图像模糊的问题，特别是在高分辨率屏幕上，如何解决这个问题呢？

原因分析

移动设备的高分辨率屏幕（如 iPhone 上的 Retina 屏幕）具有更高的像素密度，绘制 canvas 时会将实际的像素与 CSS 像素匹配。因此，在低分辨率 canvas 上进行绘图，则会在高分辨率屏幕上显示出毛边和模糊，从而影响绘图质量。

解决方案

1. 使用 window.devicePixelRatio 属性

在高分辨率屏幕上绘图时，需要设置 canvas 元素的实际像素大小，以便匹配设备的像素密度。这可以通过 window.devicePixelRatio 属性实现。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 获取设备像素密度
const ratio = window.devicePixelRatio || 1;

// 设置 canvas 显示尺寸
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";

// 设置 canvas 实际尺寸，以匹配设备像素密度
canvas.width *= ratio;
canvas.height *= ratio;

// 缩放上下文，以匹配设备像素密度
ctx.scale(ratio, ratio);

2. 使用 window.requestAnimationFrame 方法

在进行重绘操作时，如果使用 setInterval 或 setTimeout 等方法进行定时刷新，可能会造成动画卡顿和延迟。建议使用 window.requestAnimationFrame 方法，以保证更加流畅的动画效果。

function animate() {
  // 渲染画面
  render();

  // 通过回调函数，不断进行下一帧的渲染
  window.requestAnimationFrame(animate);
}

示例说明

示例 1：绘制模糊的圆形

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 获取设备像素密度
const ratio = window.devicePixelRatio || 1;

// 设置 canvas 显示尺寸
canvas.style.width = "300px";
canvas.style.height = "300px";

// 设置 canvas 实际尺寸，以匹配设备像素密度
canvas.width = 300 * ratio;
canvas.height = 300 * ratio;

// 缩放上下文，以匹配设备像素密度
ctx.scale(ratio, ratio);

// 绘制圆形
ctx.beginPath();
ctx.arc(150, 150, 100, 0, 2 * Math.PI, false);
ctx.fillStyle = "red";
ctx.fill();

在高分辨率屏幕上，绘制的圆形会出现模糊和毛边。

示例 2：绘制不模糊的圆形

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 获取设备像素密度
const ratio = window.devicePixelRatio || 1;

// 设置 canvas 显示尺寸
canvas.style.width = "300px";
canvas.style.height = "300px";

// 设置 canvas 实际尺寸，以匹配设备像素密度
canvas.width = 300 * ratio;
canvas.height = 300 * ratio;

// 缩放上下文，以匹配设备像素密度
ctx.scale(ratio, ratio);

// 绘制圆形
ctx.beginPath();
ctx.arc(150 * ratio, 150 * ratio, 100 * ratio, 0, 2 * Math.PI, false);
ctx.fillStyle = "red";
ctx.fill();

在高分辨率屏幕上，绘制的圆形不会出现模糊和毛边，因为画布的实际像素大小已经匹配了设备的像素密度。