Javascript 鼠标移动绘制圆后保存和恢复画布矩形

我在pageload上有一个画布矩形。我的要求是，我想在鼠标悬停的矩形上画一个圆，并想在离开矩形后将其删除。现在我可以用鼠标在矩形上画一个圆了。但我不能在离开矩形后去掉那个圆。我在绘制圆之前保存状态，并在绘制圆之后恢复状态。但是我的代码不起作用。任何人请让我，我做错了什么

RectMouseMove: function (evt) {
                this.ctx.save();
                this.ctx.beginPath();
                this.ctx.rect(this.X, this.Y, this.Width, this.Height);
                this.ctx.clip();                   
                this.drawCircle(this.options);
                this.ctx.restore();
   },
   drawCircle: function (options) {
        this.ctx.beginPath();
        this.ctx.arc(options.cx, options.cy, options.r, 0, 2 * Math.PI);
        this.ctx.fillStyle = options.fill;
        this.ctx.globalAlpha = options.opacity;
        this.ctx.fill();
        this.ctx.lineWidth = options["stroke-width"];
        this.ctx.strokeStyle = options.stroke;
        this.ctx.stroke();
    }

谢谢，

---

Bharathi.

调用

还原

将不会恢复到调用

保存

时画布的状态。换句话说，它不会删除绘制到画布上的任何转换。

save

所做的是将当前设置推到堆栈顶部，这样当您调用

restore

时，它将弹出并使用这些设置

例如：

var c = document.getElementById('canvas'),
    ctx = c.getContext('2d');

function draw(e) {
    ctx.fillStyle = '#09F';
    ctx.fillRect(e.x, e.y, 10, 10);
}

function reset() {
    ctx.restore();
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.save();
}

reset();

c.addEventListener('mousemove', draw);
c.addEventListener('mouseleave', reset);

---

演示：

您正在保存每个鼠标移动的状态，是否看到有问题？抱歉。。我现在已经修改了代码。。