Question

我在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。

Answer 1

当您调用restore时，调用save不会恢复到画布的状态。换句话说，它不会删除绘制到画布上的任何变换。 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);

演示：http://jsfiddle.net/moogs/rgfdc3uw/

在鼠标移动后绘制圆圈后保存并恢复画布矩形

1 个答案: