Canvas调用drawImage()绘制图片不显示是什么原因

你的代码存在3个确定性问题，和SVG文件本身、文件路径无关：

• drawImage参数传值错误：ctx.drawImage()的第一个参数要求传入已加载的HTMLImageElement/HTMLCanvasElement/HTMLVideoElement类型的DOM对象，你传入的displayImage1.src = images[0]是赋值表达式，返回值是图片路径字符串，不属于合法的绘制源。
• 没有等待图片加载完成就执行绘制：浏览器加载图片是异步行为，你给displayImage1.src赋值后立刻调用绘制方法，此时图片资源还未完成下载、解析，绘制动作拿到的是空内容，不会触发控制台报错。
• 存在两处语法小问题：触摸事件监听的事件名写错，addEventListener对应的触摸事件名是touchstart，ontouchstart是DOM元素的事件属性名，不能直接作为监听事件名使用；另外canvas透明度设置的字符串末尾缺少闭合引号，会导致该行样式失效。

你之前测试其他图片能正常显示属于缓存导致的巧合：如果测试的图片已经被浏览器缓存，赋值src后资源会瞬间就绪，部分浏览器的容错机制可能碰巧渲染出内容，但这套逻辑本身不可靠，遇到未缓存的新SVG资源时就会直接失效。

const body = document.body;
const navButton = document.querySelector('.navTab');
const navMenu = document.querySelector('.nav');

navMenu.style.display = "none";

navButton.addEventListener('mouseover', () => {
    navMenu.style.display = 'flex';
    navMenu.style.flexDirection = "column";
});
navButton.addEventListener('touchstart', () => {
    navMenu.style.display = 'flex';
    navMenu.style.flexDirection = "column";
});
navButton.addEventListener('mouseout', () => {
    navMenu.style.display = 'none';
});

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.addEventListener('mouseover', () => {
    canvas.style.opacity = "0.6";
});
const images = ["images/ozzy1.svg","images/ozzy2.jpg","images/ozzy3.jpg"];
const displayImage1 = new Image();
// 等待图片加载完成后再执行绘制
displayImage1.onload = () => {
    ctx.drawImage(displayImage1, 0, 0, canvas.width, canvas.height);
};
displayImage1.src = images[0];

如果替换代码后SVG还是无法渲染，逐一检查以下配置：

• 确认SVG根标签携带正确的命名空间：<svg xmlns="http://www.w3.org/2000/svg">，缺少命名空间的SVG文件不会被浏览器识别为合法图片资源。
• 确认SVG文件没有内嵌外部资源引用（比如引用了外部字体、外部图片），跨域或路径错误的外部引用会导致Canvas绘制静默失败。
• 确认SVG本身的viewBox、宽高属性配置正确，避免图片被绘制到画布可视区域外。

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