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核心技术的书是否能帮到你