为何HTML Canvas中渲染的SVG图像模糊？

嘿，我太懂你这种困惑了——明明SVG是矢量格式，理论上怎么放大都清晰，但用Canvas渲染出来却糊得没法看，不管是在线链接还是本地文件都踩坑。其实问题出在Canvas的分辨率适配逻辑上，咱们一步步把它捋顺：

问题根源 #

Canvas有两个容易搞混的尺寸：

• 内部绘图缓冲区尺寸：由<canvas>标签的width和height属性决定，这是真正用来绘制像素的“画布大小”。
• 页面显示尺寸：由CSS的width和height控制，是Canvas元素在屏幕上占的空间。

如果这俩尺寸不匹配，或者没考虑屏幕的设备像素比（DPR），浏览器会把低分辨率的绘图缓冲区强行拉伸到显示尺寸，哪怕你加载的是矢量SVG，也会被压缩成低像素版本再放大，自然就模糊了。

修复方案 #

咱们直接修改你的代码，让Canvas完美适配屏幕分辨率，同时保证SVG的矢量特性能发挥出来：

修改后的完整代码 #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Slider</title> 
<link rel="stylesheet" href="./css/style.css" > 
<style media="screen">
  /* 设置Canvas在页面上的显示尺寸 */
  #Slider {
    width: 400px; /* 你想要的显示宽度，可根据需求调整 */
    height: 400px; /* 示例SVG是正方形，对应设置即可 */
  }
</style> 
</head> 
<body> 
<canvas id="Slider" ></canvas> 
<script> 
var can = document.getElementById('Slider'); 
var ctx = can.getContext('2d');

// 处理高DPI屏幕，比如Retina屏
const dpr = window.devicePixelRatio || 1;
// 获取Canvas的实际显示尺寸（CSS设置的）
const rect = can.getBoundingClientRect();
// 给Canvas设置足够大的绘图缓冲区
can.width = rect.width * dpr;
can.height = rect.height * dpr;
// 缩放绘图上下文，确保绘制内容适配高分辨率
ctx.scale(dpr, dpr);

var img = new Image(); 
// 在线SVG需要添加跨域设置，避免浏览器限制
img.crossOrigin = "anonymous";
img.onload = function() { 
  // 以Canvas的显示尺寸绘制SVG，矢量图会被正确渲染到高分辨率缓冲区
  ctx.drawImage(img, 0, 0, rect.width, rect.height); 
} 
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg"; 
</script> 
</body> 
</html>

关键修改点说明 #

• 固定CSS显示尺寸：给Canvas设置明确的CSS宽高，这样我们能精准控制它在屏幕上的大小。
• 适配设备像素比：通过window.devicePixelRatio获取屏幕的DPR，把Canvas的width和height属性设为显示尺寸×DPR，保证绘图缓冲区有足够的像素密度。
• 缩放绘图上下文：调用ctx.scale(dpr, dpr)，后续的绘制操作会自动适配高分辨率，不用手动换算坐标。
• 跨域兼容：在线SVG需要添加img.crossOrigin = "anonymous"，避免浏览器的跨域安全限制导致渲染失败（本地SVG可以去掉这行）。
• 指定绘制尺寸：在drawImage里明确目标宽高为Canvas的显示尺寸，让SVG以矢量方式渲染到高分辨率缓冲区，而不是先压缩再拉伸。

额外适配技巧 #

如果你的SVG是可变尺寸，想等比例适配Canvas显示区域，可以在onload里加一段逻辑：

img.onload = function() { 
  const svgWidth = img.width;
  const svgHeight = img.height;
  // 计算等比例缩放的比例
  const scale = Math.min(rect.width / svgWidth, rect.height / svgHeight);
  const drawWidth = svgWidth * scale;
  const drawHeight = svgHeight * scale;
  // 可选：让SVG居中显示
  const x = (rect.width - drawWidth) / 2;
  const y = (rect.height - drawHeight) / 2;
  ctx.drawImage(img, x, y, drawWidth, drawHeight); 
}

这样修改后，你的SVG就能在Canvas里清晰渲染了，不管是普通屏幕还是高DPI屏幕都能完美适配～

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