Javascript 图像作为html画布的模板

我试图让用户在图像的某些部分手动着色。举个例子，这里有一只猫。用户应该能够在猫的脚颜色，如果他们选择。我希望它们只在画布的猫身图像部分内着色（不是图像的背景部分或画布的空白，但我想我可以手动修剪图像）

到目前为止，我所做的尝试如下。基本上，我在我的位置检查像素的颜色，只有当它不是背景色时才画图。这种方法很有效，但我很容易流血，因为有些东西坏了。我想知道是否有可能设置一个特定的剪辑区域，但无法确定

`

var canvas=document.getElementById（“空格”）；
var ctx=canvas.getContext（“2d”）；
var pos={x:0，y:0}；
//来自鼠标事件的新位置
功能设置位置（e）{
pos.x=e.clientX；
pos.y=e.clientY；
}
函数rgbToHex（r、g、b）{
如果（r>255 | | g>255 | b>255）
抛出“无效颜色组件”；
return（（r由于您不想着色的图像部分是透明的，您可以将上下文设置为
'source-top'
。此后，您绘制到画布上的任何像素都将自动呈现被覆盖像素的不透明度，并且您不必弄乱
getImageData
：


var canvas=document.getElementById（“空格”）；
var ctx=canvas.getContext（“2d”）；
var pos={
x:0,，
y:0
};
//来自鼠标事件的新位置
功能设置位置（e）{
//偏移量x/Y提供画布内的正确坐标
//假设它没有填充
pos.x=e.offsetX；
pos.y=e.offsetY；
}
功能图（e）{
if（e.buttons！==1）返回；//如果按下鼠标。。。。。
var color=“#cb3594”；
ctx.beginPath（）；//开始绘制路径
ctx.lineWidth=5；//线宽
ctx.lineCap=“圆形”//圆形端盖
ctx.strokeStyle=color；//行的十六进制颜色
ctx.moveTo（pos.x，pos.y）；//从位置
设定位置（e）；
ctx.lineTo（位置x，位置y）；//位置
stroke（）；//画出来！
}
var outlineImage=新图像（）；
outlineImage.onload=函数（）{
//默认值，显式设置，因为我们正在其他地方更改它
ctx.globalCompositeOperation='source over'；
ctx.drawImage（大纲图像，0,0）；
//不要在画布的透明部分上画画
ctx.globalCompositeOperation='source-top'；
//在分发蜡笔之前，请等待模具装入
space.addEventListener（“mousemove”，draw）；
space.addEventListener（“鼠标向下”，设置位置）；
space.addEventListener（“鼠标指针”，设置位置）；
}
outlineImage.src=”https://i.stack.imgur.com/so095.png“；
由于您不想着色的图像部分是透明的，您可以将上下文设置为
'source-top'
。此后，您绘制到画布上的任何像素都将自动呈现覆盖像素的不透明度，并且您不必弄乱
getImageData
：


var canvas=document.getElementById（“空格”）；
var ctx=canvas.getContext（“2d”）；
var pos={
x:0,，
y:0
};
//来自鼠标事件的新位置
功能设置位置（e）{
//偏移量x/Y提供画布内的正确坐标
//假设它没有填充
pos.x=e.offsetX；
pos.y=e.offsetY；
}
功能图（e）{
if（e.buttons！==1）返回；//如果按下鼠标。。。。。
var color=“#cb3594”；
ctx.beginPath（）；//开始绘制路径
ctx.lineWidth=5；//线宽
ctx.lineCap=“圆形”//圆形端盖
ctx.strokeStyle=color；//行的十六进制颜色
ctx.moveTo（pos.x，pos.y）；//从位置
设定位置（e）；
ctx.lineTo（位置x，位置y）；//位置
stroke（）；//画出来！
}
var outlineImage=新图像（）；
outlineImage.onload=函数（）{
//默认值，显式设置，因为我们正在其他地方更改它
ctx.globalCompositeOperation='source over'；
ctx.drawImage（大纲图像，0,0）；
//不要在画布的透明部分上画画
ctx.globalCompositeOperation='source-top'；
//在分发蜡笔之前，请等待模具装入
space.addEventListener（“mousemove”，draw）；
space.addEventListener（“鼠标向下”，设置位置）；
space.addEventListener（“鼠标指针”，设置位置）；
}
outlineImage.src=”https://i.stack.imgur.com/so095.png“；
好的，一种方法是使用图像地图。这里有一个我玩过的突出显示
有趣的东西，我会看一看。一种方法是使用图像地图。这里有一个我玩过的突出显示
有趣的东西，我会看一看谢谢你，那真的很棒！谢谢你，那真的很棒！
    var canvas = document.getElementById("space");
    var ctx = canvas.getContext("2d");

    var pos = { x: 0, y: 0 };

    // new position from mouse events
    function setPosition(e) {
        pos.x = e.clientX;
        pos.y = e.clientY;
    }

    function rgbToHex(r, g, b) {
        if (r > 255 || g > 255 || b > 255)
            throw "Invalid color component";
        return ((r << 16) | (g << 8) | b).toString(16);
    }

    function draw(e) {
        if (e.buttons !== 1) return; // if mouse is pressed.....

        var color = "#cb3594";

        ctx.beginPath(); // begin the drawing path

        ctx.lineWidth = 5; // width of line
        ctx.lineCap = "round"; // rounded end cap
        ctx.strokeStyle = color; // hex color of line

        var p = ctx.getImageData(pos.x, pos.y, 1, 1).data;
        var sourceColor = rgbToHex(p[0], p[1], p[2]);
        if(sourceColor != "BACKGROUNDHEX" && sourceColor != color) {
            ctx.moveTo(pos.x, pos.y); // from position
            setPosition(e);
            p = ctx.getImageData(pos.x, pos.y, 1, 1).data;
            targetColor = rgbToHex(p[0], p[1], p[2]);

            if(targetColor != "BACKGROUNDHEX" && targetColor != color) {
                ctx.lineTo(pos.x, pos.y); // to position
                ctx.stroke(); // draw it!
            }
        }

    }

    var outlineImage = new Image();
    outlineImage.onload = function() {
        ctx.drawImage(outlineImage, 0, 0, 704, 720);
    }
    outlineImage.src = "IMAGE.png";

    space.addEventListener("mousemove", draw);
    space.addEventListener("mousedown", setPosition);
    space.addEventListener("mouseenter", setPosition);


</script>