iPad端Canvas绘制图片缩放模糊问题求助

核心问题 #

你的canvas仅设置了显示尺寸（1180x820），但iPad是Retina屏，设备像素比（DPR）为2，实际屏幕物理分辨率是2360x1640。直接用1180x820的canvas绘制，相当于每个canvas像素被拉伸到2x2的物理像素，缩放图片后自然模糊。

解决步骤 #

1. 适配Canvas的实际像素与显示尺寸
   把canvas的实际像素宽高设为显示尺寸的DPR倍，再通过CSS固定显示尺寸：

   const canvas = document.getElementById('target-canvas');
   const ctx = canvas.getContext('2d');
   const dpr = window.devicePixelRatio || 1;
   
   // 设置canvas实际像素分辨率（匹配屏幕物理像素）
   canvas.width = 1180 * dpr;
   canvas.height = 820 * dpr;
   // 设置canvas显示尺寸（占满WKWebView）
   canvas.style.width = '1180px';
   canvas.style.height = '820px';
   
   // 缩放绘图上下文，后续直接用显示尺寸计算坐标/尺寸即可
   ctx.scale(dpr, dpr);
   

2. 正确计算图片缩放比例并绘制
   基于canvas的显示尺寸（1180x820）计算原图（1920x1080）的适配比例，保证图片完整显示且清晰：

   const imgMenu = new Image();
   imgMenu.src = '你的图片资源路径';
   imgMenu.onload = function() {
     const canvasW = 1180;
     const canvasH = 820;
     const imgRatio = imgMenu.width / imgMenu.height;
     const canvasRatio = canvasW / canvasH;
   
     let drawW, drawH;
     // 按比例适配，避免图片变形
     if (imgRatio > canvasRatio) {
       drawW = canvasW;
       drawH = canvasW / imgRatio;
     } else {
       drawH = canvasH;
       drawW = canvasH * imgRatio;
     }
   
     // 开启高清平滑（现在会生效）
     ctx.imageSmoothingEnabled = true;
     ctx.imageSmoothingQuality = 'high';
   
     // 左上角绘制（如果需要居中，x=(canvasW-drawW)/2，y=(canvasH-drawH)/2）
     ctx.drawImage(imgMenu, 0, 0, drawW, drawH);
   };
   

为什么之前的设置无效？ #

你之前开启的imageSmoothingEnabled等参数，只有在canvas的实际像素足够时才会生效。之前的canvas实际像素远低于屏幕物理分辨率，缩放图片时没有足够的像素填充，自然会模糊。现在用高分辨率canvas配合正确缩放，就能利用iPad的Retina屏幕展示清晰的图片。

内容的提问来源于stack exchange，提问作者Alx