Canvas绘制圆形被背景图遮挡问题求助（附代码）

嘿，这个问题太常见啦！你看不到圆形的核心原因是Canvas是按代码执行顺序叠加绘制内容的——后画的元素会直接盖住先画的。你当前的代码应该是把背景图的绘制放在了圆形之后，或者圆形画在了背景图加载完成之前，才导致圆形被完全遮挡。

修正后的完整代码 #

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var background = new Image();
background.src = "img/star-sky.jpg";

// 必须等图片加载完成后再执行绘制逻辑
background.onload = function(){
    // 第一步：先绘制底层的背景图
    context.drawImage(background, 0, 0, canvas.width, canvas.height);
    
    // 第二步：在背景图上方绘制圆形
    context.beginPath();
    // 示例：在画布中心画一个半径50px的红色填充圆形
    context.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI * 2);
    context.fillStyle = '#ff3333'; // 可自定义圆形颜色
    context.fill();
    // 如果需要给圆形加描边，可添加下面的代码
    // context.strokeStyle = '#ffffff'; context.lineWidth = 2; context.stroke();
    context.closePath();
};

关键注意点 #

• 所有绘制逻辑一定要放在background.onload函数内部，否则图片还没加载完成就开始绘制，会出现空白或绘制失败的情况。
• 严格遵循**先画底层元素（背景图），再画上层元素（圆形）**的顺序，这样上层元素才能正常显示在底层之上。

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