1
我想出了如何更改画布的颜色,但是当我在画布中放置多个图像时,我遇到了问题,它没有出现。我只有一个出现的图像。这是代码。在一个画布中更改多个图像的颜色
这是当我加载在 'canvas1' 我的图像
var image01 = new Image();
var image02 = new Image();
var image03 = new Image();
image01.onload = function() {
drawImage(this, 73, 32, 249.1, 390);
changeColor(this, 0, 0, 165, 73, 32, 249.1, 390);
image02.onload = function() {
drawImage(this, 1, 64, 90, 335);
changeColor(this, 0, 0, 165, 1, 64, 90, 335);
}
image02.src = "images/Manches/Longue/Slim/Homme/7C5D5D2D.png";
image03.onload = function() {
drawImage(this, 303, 65, 90, 335);
changeColor(this, 0, 0, 165, 303, 65, 90, 335);
}
image03.src = "images/Manches/Longue/Slim/Homme/7C5D5D2E.png";
};
image01.src = "images/VueDevant/Homme/Droite/658FFBC6.png";
这是用于改变我的画布的颜色的功能
(代码适于从an answer posted by K3N):
function changeColor(img, hue, sat, l, x, y, width, height) {
context.clearRect(x, y, width, height);
context.globalCompositeOperation = "source-over";
context.drawImage(img, x, y, width, height);
var lcombo = false;
if (lcombo) {
context.globalCompositeOperation = "color";
context.fillStyle = "hsl(" + hue + "," + sat + "%, 50%)";
context.fillRect(x, y, width, height);
context.clearRect(x, y, width, height);
} else {
// adjust "lightness"
context.globalCompositeOperation = l < 100 ? "color-burn" : "color-dodge";
// for common slider, to produce a valid value for both directions
l = l >= 100 ? l - 100 : 100 - (100 - l);
context.fillStyle = "hsl(0, 50%, " + l + "%)";
context.fillRect(x, y, width, height);
// context.clearRect(x,y, width, height);
// adjust saturation
context.globalCompositeOperation = "saturation";
context.fillStyle = "hsl(0," + sat + "%, 50%)";
context.fillRect(x, y, width, height);
// context.clearRect(x,y, width, height);
// adjust hue
context.globalCompositeOperation = "hue"; //hue
context.fillStyle = "hsl(" + hue + ",1%, 50%)";
// context.fillRect(x, y, width,height);
}
// clip
context.globalCompositeOperation = "destination-in";
context.drawImage(img, x, y, width, height);
context.globalCompositeOperation = "source-over";
}
谢谢你的回答,但我有我的图像下的灰色矩形我需要删除那些矩形...这里是结果的链接 https://ibb.co/jt2GGa –
@yasminajaaouane此要求是/是不是你问题的一部分。 – reporter
根据https://www.w3schools.com/colors/colors_hsl.asp它可能是一个饱和问题,因为这个属性的0%意味着图像变得灰暗。 – reporter