html5 canvas清除绘制问题，想不影响图片，求解

Question

1. 首先非常感谢您能查看我的疑惑，我会在下面描述我的疑问，烦劳您看一下，非常感谢

2. 我把一张图片绘制在canvas中，效果如下.想实现的效果： 图片中红色圆形区域是目标区域，鼠标落在这里，提示正确。否则提示错误

1. 我已经实现了点击提示效果，但是我点击了错误区域之后，会出现一个红色叉号（使用canvas绘制的）；再下一次点击时候，我想把之前出现的红色叉号清除（使用clearRect），但是不清楚笑脸图片 ,我的疑惑就是使用context.clearRect()会导致把笑脸图片也会清除，效果如下；

1. 我的疑惑是：我想清除上一次点击出现的叉号，同时保留笑脸图片，请问有什么好的解决方案么？再次感谢您

Answer 1

第一種，定義一個開關變量，mousedown時在指定區域開關變量為true，畫❌，否則不畫
第二種，使用clearRect後，重畫圖片
第三種，如下樓所說，不清除，直接覆蓋，

Answer 2

不確定你的最終想要的是塊怎麼樣的功能。是我的話，紅點和叉叉都不用canvas直接用img覆蓋上去。這是我的一個例子，看起來像是canvas相關很多，但其實都是img做的

另外，你這裡要做的話，可以簡單的模擬一下像是使用createjs之類的函式庫的技巧：你需要一個渲染loop

function renderingLoop() {
    if(!dirty)
        return;
        
    // do your clearRect
    context.clearRect();
    
    // for-each every targets you want to render into the canvas
    displayObjects.forEach(function(object) {
       if(!object.hidden) {
           // draw this object into canvas
       }
    });

    requestAnimationFrame(renderingLoop);
}

上面是一個思路

1. 把要繪製在canvas上的目標物放在一個loop裡面循環渲染

2. 發生互動時，去更改對應物件的hidden屬性，同時更新dirty標識變量，告訴loop需要重新繪製

3. 下一次loop發生時，所有新標誌為hidden的物件就沒有了，其他物件依舊繪製在了canvas上

Answer 3

叉是常數，畫圖是變量，兩個不應該在同一個canvas裡面，可以把叉用html或另一個canvas裡面，或者用其他的canvas庫，類似createjs

Answer 4

不知道機工社的這本html和canvas核心技術的書是否能幫到你