使用javascript的色度键控&；jQuery_Javascript_Canvas_Drawimage_Getimagedata

使用javascript的色度键控&；jQuery

javascript canvas

使用javascript的色度键控&；jQuery,javascript,canvas,drawimage,getimagedata,Javascript,Canvas,Drawimage,Getimagedata,好的，我们需要你的帮助！我们（与我们的信息类）正在建立一个数字地图！像这样：（来源：）用你的鼠标，你应该能够划出你去过的地方。现在我们被卡住了。我们有一块画布，我们画了一幅世界地图。然后，当用户单击并拖动一个笔划时，该笔划将添加到世界地图的顶部现在我们要将（绿色绘制的）笔划转换为透明度，以便可以显示其背后的图像。（就像把你去过的地方划掉，然后把后面的地图（用彩色）显示出来一样）这是我们的html： <body> <h1>Scratchmap</h1

好的，我们需要你的帮助！我们（与我们的信息类）正在建立一个数字地图！像这样：

（来源：）

用你的鼠标，你应该能够划出你去过的地方。现在我们被卡住了。我们有一块画布，我们画了一幅世界地图。然后，当用户单击并拖动一个笔划时，该笔划将添加到世界地图的顶部

现在我们要将（绿色绘制的）笔划转换为透明度，以便可以显示其背后的图像。（就像把你去过的地方划掉，然后把后面的地图（用彩色）显示出来一样）

这是我们的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);

//设置变量
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=新图像（）；
img.onload=函数（）{
背景图像（img，img_x，img_y）；
}
img.src=“worldmap.png”
var鼠标位置x=[]；
变量鼠标位置y=[]；
var厚度=0；
var arraycount=0；
var mouse_down=false；
var mouse_skip=[]；
函数更新（）{}
document.body.onmousedown=函数（）{
鼠标向下=真；
var mouseX，mouseY；
如果（事件抵消）{
mouseX=event.offsetX；
mouseY=event.offsetY；
}else if（event.layerX）{
mouseX=event.layerX；
mouseY=event.layerY；
}
鼠标位置（mouseX）；
鼠标位置推（鼠标）；
数组计数+=1；
}
document.body.onmouseup=函数（）{
如果（鼠标按下）{
鼠标向下=错误；
鼠标跳过。按下（arraycount）；
}
}
document.body.onmousemove=函数（）{
如果（鼠标按下）{
var mouseX，mouseY；
如果（事件抵消）{
mouseX=event.offsetX；
mouseY=event.offsetY；
}else if（event.layerX）{
mouseX=event.layerX；
mouseY=event.layerY；
}
drawImage（img，0,0）；
鼠标位置（mouseX）；
鼠标位置推（鼠标）；
context.lineWidth=2.5；
context.strokeStyle=“#00FF00”；
moveTo（鼠标位置x[arraycount-1]，鼠标位置y[arraycount-1]）；
lineTo（鼠标位置x[arraycount]，鼠标位置y[arraycount]）；
stroke（）；
数组计数+=1；
var imgdata=context.getImageData（0，0，a_canvas.width，a_canvas.height）；
var l=imgdata.data.length/4；
对于（变量i=0；i


现在，当我们移除draw_image（）
时，另一块画布上的绿色变为黄色。但是使用draw\u image（）
在第二个画布上不会绘制任何内容
怎么了？或者你有没有办法用其他Javascript来实现这一点，或者根本不用Javascript
任何帮助都将不胜感激
Luud Janssen&Friends
您可以使用稍微不同的方法来实现这一点：


将隐藏图像设置为CSS背景
使用上下文在顶部绘制封面图像

将复合模式更改为目标输出
现在绘制的任何内容都将擦除，而不是显示后面的（CSS集）图像

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

然后，只需跟踪鼠标位置并绘制任意形状以擦除该区域，例如一个圆：

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

出于说明目的的随机图像

哦，我的天啊。。。你太棒了！非常感谢你！你真的帮了我们！

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