0

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

https://www.megagadgets.nl/media//ScratchMap3_thumb3.jpg
（来源：megagadgets.nl）

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

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

这是我们的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 来做到这一点？

任何帮助，将不胜感激！

路德·詹森和朋友

4

1 回答 1

2

您可以使用稍微不同的方法来做到这一点：

  • 将隐藏图像设置为 CSS 背景
  • 使用上下文在顶部绘制封面图像
  • 将合成模式更改为destination-out
  • 现在绘制的任何内容都将擦除而不是绘制显示后面的（CSS 集）图像

现场演示

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

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();
}

快照
用于说明目的的随机图像

于 2014-02-07T12:09:26.157 回答