Canvas技术问题：clearRect()无法清除drawImage()绘制的图像

我来帮你搞定这个问题！你遇到的核心问题其实是图像加载的异步特性在搞鬼，咱们一步步理清楚：

你的代码里，ctx.clearRect(0, 0, 32, 32)是在设置img.src之后立刻执行的，但浏览器加载图像需要时间，img.onload是个异步回调函数——它要等图像完全加载完成后才会触发。这就导致了一个顺序bug：

1. 先执行clearRect清空了画布
2. 过了一会儿图像加载完成，drawImage才把图像画到了已经清空的画布上
   所以你看到的始终是最后绘制的图像，自然会误以为clearRect没生效。

修正方案 #

把clearRect移到img.onload回调函数内部、drawImage之前，这样就能保证每次绘制新图像前，先清空画布：

var canvas = document.createElement('canvas');
// 可以给画布设置固定尺寸，避免默认尺寸问题
canvas.width = 32;
canvas.height = 32;
var ctx = canvas.getContext("2d");

function image(_img, _x, _y, _w, _h) {
    var img = new Image(); // 创建新图像元素
    img.onload = function() {
        // 先清空画布，再绘制新图像
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, _x, _y, _w, _h);
    }
    img.src = _img; // 设置资源路径
}

var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);
// 注意补全完整的图片地址，示例用完整占位图地址
image("http://via.placeholder.com/32x32");

额外优化建议 #

• 用canvas.width和canvas.height代替固定数值，这样如果后续调整画布尺寸，清空操作依然能覆盖整个画布
• 确保图片地址是完整可访问的，否则onload回调不会触发，图像也无法绘制出来

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