Live demo here

Question

我正在尝试在绘制画布后更改画布内容的颜色。因此，如果您开始绘制一个绿色圆圈，您可以稍后决定将之前绘制的圆圈变成红色圆圈。

我在这里使用signaturePad插件： https://github.com/szimek/signature_pad

我已经构建了一些功能，但笔颜色变化不会改变以前绘制的元素。这是一个小提琴： http://jsfiddle.net/Z6g5Z/

感谢您的帮助！小提琴是可能的。查看问题的最佳方式，但JS和标记在下面。

var canvas = $("#can")[0];
var signaturePad = new SignaturePad(canvas, {
    minWidth: 2,
    maxWidth: 5,
    penColor: "rgb(66, 133, 244)"
});

$('#clear').click(function(){
    signaturePad.clear();
});

$('.global-color li').click(function(){
    $('.on').removeClass('on');
    var $t = $(this);
    $t.addClass('on');
    var selectedColor = $t.data('color');
    signaturePad.penColor = hexToRgb(selectedColor);
});


<ul class="global-color">
    <li class="yellow-pick" data-color="#f8c90d">yellow</li>
    <li class="green-pick" data-color="#3dae49">green</li>
    <li class="orange-pick" data-color="#e87425">orange</li>
    <li class="blue-pick on" data-color="#009cc5">blue</li>
</ul>
<div>
    <input id="clear" type="button" value="clear" />
</div>
<canvas id="can" width="200px" height="200px"></canvas>

Answer 1

您可以通过更改复合模式并在现有内容上填写所需的颜色。

对于这样的图书馆，你无法保证它的内部运作，所以它今天可能有效，如果作者决定改变它在内部的行为方式，可能明天无法工作。

因此，通过该免责声明，您可以使用以下代码更改现有绘图的颜色 - 这通常适用于所有画布绘图，并将非透明像素更改为您在顶部绘制的内容：

function changeColor() {
    ctx.save();
    ctx.globalCompositeOperation = 'source-atop';
    ctx.fillStyle = selectedColor;
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.restore();
}

但是，由于我们要进入图书馆，因此至少还有一个其他限制。该库似乎在其注册鼠标的顶部使用第二个画布。当笔上升时，它将该绘图传输到主画布。对我们来说，这个问题的缺点是，在我们画出新东西之前，笔的变化是不会发生的;我们无法通过使用上述功能直观地改变笔的颜色 - 为此您必须修补库以添加例如在内部执行所有步骤的方法。

但我们确实接近添加以下设置：

var signaturePad = new SignaturePad(canvas, {
    minWidth: 2,
    maxWidth: 5,
    penColor: "rgb(66, 133, 244)",
    onBegin: changeColor             /// add callback here
});

Live demo here

希望这有帮助！

Answer 2

在换色处理程序中，让所有画布将其（非透明）像素更改为新颜色为此，最简单的方法是使用globalComposite操作模式'source-in'，并用新颜色填充画布：

// set all pixels of the image to this color
function setCurrentColor(canvas, color) {
   var context = canvas.getContext('2d');
   context.save();
   context.fillStyle = color;
   context.globalCompositeOperation = 'source-in';
   context.fillRect(0,0,canvas.width, canvas.height);
   context.restore();
}

我更新了你的演示： http://jsfiddle.net/gamealchemist/Z6g5Z/3/

绘制后在画布上更改笔颜色

2 个答案:

Live demo here