Я пытаюсь заполнить цвет изображения, используя нижеприведенный фрагмент кода для заполнения цвета на изображении холста. Его успешно заполняет цвет в холсте. Теперь я пытаюсь стереть заполненный цвет прикосновением пользователя, используя этот фрагмент кода для стирания цвета в изображении холста. Его стирает цвет &, устанавливая прозрачную область на этом прикосновенном положении. Теперь я хочу пополнить эту область прикосновением пользователей к цветам, но это не позволяет мне раскрашивать ее из-за прозрачных пикселей. Так есть ли способ пополнить пиксели цветом? Или есть ли другой способ стереть цвет с изображения холста? Любой ответ будет оценен.Заполните область удаленной области для холста
фрагмент коды для заполнения цвета на изображениях холста
var ctx = canvas.getContext('2d'),
img = new Image;
img.onload = draw;
img.crossOrigin = 'anonymous';
img.src = "https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png";
function draw(color) {
ctx.drawImage(img, 0, 0);
}
canvas.onclick = function(e){
var rect = canvas.getBoundingClientRect();
var x = e.clientX-rect.left,
y = e.clientY-rect.top;
ctx.globalCompositeOperation = 'source-atop';
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(x-5,y-5,10,0,2*Math.PI);
ctx.fill();
}
фрагмента кода для стирания цвета на изображениях холста
(function() {
// Creates a new canvas element and appends it as a child
// to the parent element, and returns the reference to
// the newly created canvas element
function createCanvas(parent, width, height) {
var canvas = {};
canvas.node = document.createElement('canvas');
canvas.context = canvas.node.getContext('2d');
canvas.node.width = width || 100;
canvas.node.height = height || 100;
parent.appendChild(canvas.node);
return canvas;
}
function init(container, width, height, fillColor) {
var canvas = createCanvas(container, width, height);
var ctx = canvas.context;
// define a custom fillCircle method
ctx.fillCircle = function(x, y, radius, fillColor) {
this.fillStyle = fillColor;
this.beginPath();
this.moveTo(x, y);
this.arc(x, y, radius, 0, Math.PI * 2, false);
this.fill();
};
ctx.clearTo = function(fillColor) {
ctx.fillStyle = fillColor;
ctx.fillRect(0, 0, width, height);
};
ctx.clearTo(fillColor || "#ddd");
// bind mouse events
canvas.node.onmousemove = function(e) {
if (!canvas.isDrawing) {
return;
}
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var radius = 10; // or whatever
var fillColor = '#ff0000';
ctx.globalCompositeOperation = 'destination-out';
ctx.fillCircle(x, y, radius, fillColor);
};
canvas.node.onmousedown = function(e) {
canvas.isDrawing = true;
};
canvas.node.onmouseup = function(e) {
canvas.isDrawing = false;
};
}
var container = document.getElementById('canvas');
init(container, 531, 438, '#ddd');
})();
Если вы хотите применить заливку, установите 'globalCompositeOperation = 'source-over'', что приведет к рисованию новых чертежей по существующим чертежам. ('source-over' - режим компоновки по умолчанию). Если вы хотите «стереть», установите «globalCompositeOperation = 'destination-out'', что приведет к тому, что новые чертежи очистят существующие пиксели, где новые пиксели перекрывают существующие пиксели. – markE
@markE Я хочу заполнить цвет в непрозрачной области изображения, поэтому я использовал 'ctx.globalCompositeOperation = 'source-atop'' для заполнения цвета. Чтобы стереть его, я использовал' ctx.globalCompositeOperation =' destination-out '. –
Проверьте композицию 'source-out', которая рисует новые пиксели, где они не перекрывают существующие пиксели. В вашем случае это может быть не идеально, если пользователь отвечает за размещение новых пикселей, потому что новая дуга не может быть размещена в том же месте, что и дуга стирания. Возможно, вашим лучшим решением является отслеживание того, где пользователь стирался, и если они нажмут в ранее удаленной области, вы можете просто перерисовать в эту известную область. – markE