在画布上用圆圈擦除以查看 z-index 上的圆圈答案

【问题标题】：erasing with a circle on a canvas to see what is behind it on z-index在画布上用圆圈擦除以查看 z-index 上的圆圈
【发布时间】：2015-11-19 13:21:42
【问题描述】：

我正在尝试制作一个分层绘图应用程序（一个画布，后面有一些东西），我想在其中擦除并查看 z-index 顶部的画布。但是由于某种原因 onmousemove 我不能让它继续。

我认为我在 draw 方法中处理画布的方式有问题，但我不确定。

下面的代码将一个画布放在另一个画布的顶部，上面是蓝色的，下面是红色的，目的是在鼠标移动时在上面的蓝色画布上用圆形擦除，以便擦除用鼠标在画布上，就像在 Photoshop 或 GIMP 中用橡皮擦一样。

<html>
<script type="text/javascript">
//inspired by http://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse
var canvas, canvasUnder, ctx, ctxUnder, circle, drawing = false,
    prevX = 0,
    currX = 0,
    prevY = 0,
    currY = 0;

var x = "black",
    y = 2;

var w,h;

function init() {
    canvas = document.getElementById('can');
    ctx = canvas.getContext("2d");

    canvasUnder = document.getElementById('under');
    ctxUnder = canvasUnder.getContext("2d");

    w = canvas.width;
    h = canvas.height;
    canvas.addEventListener("mousemove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);

    ctx.rect(0,0,canvas.width,canvas.height);
    ctx.fillStyle="blue";
    ctx.fill();

    //fill the canvas under with solid color to start with
    ctxUnder.rect(0,0,canvasUnder.width,canvasUnder.height);
    ctxUnder.fillStyle="red";
    ctxUnder.fill();
}

function draw() {
    circle = new Path2D();
    circle.arc(currX,currY,16,0,2*Math.PI);
    ctx.clip(circle);
    ctx.clearRect(0, 0, w, h);
    ctx.restore();
}

function findxy(res, e) {
    if (res == 'down') {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;

        drawing = true;
    }
    if (res == 'up' || res == "out") {
        drawing = false;
    }
    if (res == 'move') {
        if (drawing) {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
            draw();
        }
    }
}
</script>
<body onload="init()">
    <canvas id="under" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;" z-index="1;"></canvas>
    <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;" z-index="2;"></canvas>
</body>
</html>

问题是：为什么它只在第一次调用 draw() 时起作用，而在之后不起作用？

我在这里为此设置了一个小提琴：https://jsfiddle.net/avpv1ahr/1/

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

2D 渲染上下文的.clip() 方法仅缩小区域（另请参见#14499）。因此，当您尝试擦除下一个“圆圈”的区域时，第一个圆圈仍然有效。因此，您实际上看不到变化。

由于resetClip() 没有在当前的几个浏览器中实现，你必须保存和恢复当前的上下文状态：

function draw() {
    ctx.save(); // save the state

    circle = new Path2D();
    circle.arc(currX,currY,16,0,2*Math.PI);
    ctx.clip(circle);
    ctx.clearRect(0, 0, w, h);

    ctx.restore(); // restore the state
}

虽然您的代码已经包含 ctx.restore()，但它缺少 ctx.save()。

【讨论】：