Question

好的，我们需要你的帮助！我们（与我们的信息学课程）正在构建数字临时图！像这样：

使用鼠标，你应该能够划掉你去过的地方。现在我们被困住了。我们有一个画布，我们绘制世界地图的图像。然后，当用户点击并拖动笔划时，将添加到世界地图的顶部。

现在我们想要将（绿色绘制的）笔划转换为透明度，以便我们可以显示它背后的图像。（就像抓住你去过的地方并露出背后的地图（彩色））。

这是我们的HTML：

<body>
    <h1>Scratchmap</h1>
    <hr>
    <canvas id="ball" width="600px" height ="600px">

    </canvas>

    <canvas id="ball2" width="600px" height ="600px">

    </canvas>
</body>

这是我们的javascript：

// Set variables
var a_canvas = document.getElementById("ball");
var context = a_canvas.getContext("2d");

var a_canvas2 = document.getElementById("ball2");
var context2 = a_canvas2.getContext("2d");
var img = new Image();
img.onload = function () {
    context.drawImage(img, img_x, img_y);
}
img.src = "worldmap.png"
var mouse_pos_x = [];
var mouse_pos_y = [];

var thickness = 0;

var arraycount = 0;

var mouse_down = false;

var mouse_skip = [];

function update() {}

document.body.onmousedown = function () {
    mouse_down = true;
    var mouseX, mouseY;

    if (event.offsetX) {
        mouseX = event.offsetX;
        mouseY = event.offsetY;
    } else if (event.layerX) {
        mouseX = event.layerX;
        mouseY = event.layerY;
    }
    mouse_pos_x.push(mouseX);
    mouse_pos_y.push(mouseY);
    arraycount += 1;
}

document.body.onmouseup = function () {
    if (mouse_down) {
        mouse_down = false;
        mouse_skip.push(arraycount);
    }
}

document.body.onmousemove = function () {
    if (mouse_down) {
        var mouseX, mouseY;

        if (event.offsetX) {
            mouseX = event.offsetX;
            mouseY = event.offsetY;
        } else if (event.layerX) {
            mouseX = event.layerX;
            mouseY = event.layerY;
        }

        context.drawImage(img, 0, 0);
        mouse_pos_x.push(mouseX);
        mouse_pos_y.push(mouseY);
        context.lineWidth = 2.5;
        context.strokeStyle = "#00FF00";
        context.moveTo(mouse_pos_x[arraycount - 1], mouse_pos_y[arraycount - 1]);
        context.lineTo(mouse_pos_x[arraycount], mouse_pos_y[arraycount]);
        context.stroke();
        arraycount += 1;

        var imgdata = context.getImageData(0, 0, a_canvas.width, a_canvas.height);
        var l = imgdata.data.length / 4;

        for (var i = 0; i < l; i++) {
            var r = imgdata.data[i * 4 + 0];
            var g = imgdata.data[i * 4 + 1];
            var b = imgdata.data[i * 4 + 2];
            if (g < 255) {
                imgdata.data[i * 4 + 3] = 0;
            }
        }
        context2.putImageData(imgdata, 0, 0);
    }
}

setInterval(update, 10);

现在，当我们移除draw_image()时，绿色在另一个画布上变为黄色。但是draw_image()在第二个画布上没有绘制任何东西。

出了什么问题？或者你有办法用其他Javascript或者在javascript中完成这个吗？

任何帮助将不胜感激！

Luud Janssen＆amp;朋友

Answer 1

您可以采用略有不同的方法来实现这一目标：

将隐藏图像设置为CSS背景
使用上下文
将复合模式更改为destination-out
现在绘制的任何内容都会删除，而不是显示

Live demo

密钥代码（有关详细信息，请参阅上面链接的演示）：

function start() {
    /// draw top image - background image is already set with CSS
    ctx.drawImage(this, 0, 0, canvas.width, canvas.height);

    /// KEY: this will earse where next drawing is drawn
    ctx.globalCompositeOperation = 'destination-out';

    canvas.onmousedown = handleMouseDown;
    canvas.onmousemove = handleMouseMove;
    window.onmouseup = handleMouseUp;
}

然后只需跟踪鼠标位置并绘制任何形状来擦除该区域，例如圆圈：

function erase(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, pi2);
    ctx.fill();
}

Snapshot
^{用于说明目的的随机图像}

用javascript＆amp;和色度键控jQuery的

1 个答案:

Live demo