在一个画布中更改多个图像的颜色 [英] Changing the color of multiple images in one canvas
问题描述
我想出了如何改变画布的颜色,但是当我在画布上放置多个图像时,我不知道该如何显示。我只有一个出现的图像。这是代码。
这是我在'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;
这是改变画布颜色的函数
来自由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 {
// adjustlightness
context.globalCompositeOperation = l< 100? color-burn:color-dodge;
//用于通用滑块,为两个方向产生有效值
l = l> = 100? 1 - 100:100 - (100 - 1);
context.fillStyle =hsl(0,50%,+ l +%);
context.fillRect(x,y,width,height);
// context.clearRect(x,y,width,height);
//调整饱和度
context.globalCompositeOperation =饱和度;
context.fillStyle =hsl(0,+ sat +%,50%);
context.fillRect(x,y,width,height);
// context.clearRect(x,y,width,height);
//调整色相
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;
解决方案因为我与Canvas对象不相似,并且来自提问者的代码示例不完整,我创建了自己的示例。在这之后,我一步一步地跑过每一行,并创建了一个运行示例: falsedata-console =truedata-babel =false>
< HTML> <身体GT; < canvas id =myCanvaswidth =700height =700style =border:1px solid red;>< / canvas> < script type =text / javascript> var canvas = document.getElementById('myCanvas'),context = canvas.getContext('2d'); var image01 = new Image(); var image02 = new Image(); var image03 = new Image(); image01.onload = function(){changeColor(image01,0,0,165,73,32,249.1,390); image02.onload = function(){changeColor(image02,0,0,165,1,64,90,335); } image02.src =https://1.f.ix.de/scale/geometry/360x202/q75/imgs/09/2/2/5/1/1/9/7/zeroday-d774e8c5b2414e48-b0237d756e9017a9- 39b755ca2936afda.jpeg; image03.onload = function(){changeColor(image03,0,0,565,303,65,90,335); } image03.src =https://1.f.ix.de/scale/geometry/696/q75/imgs/18/2/2/5/2/1/4/1/autofly-010b77473b49efc6.jpeg ; }; image01.src =https://1.f.ix.de/scale/geometry/336/q75/imgs/18/2/2/5/2/1/4/1/image-1499148077454426-aa28a644b6934a51.jpeg ;函数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 {context.globalCompositeOperation = 1< 100? color-burn:color-dodge; l = 1> = 100? 1 - 100:100 - (100 - 1); context.fillStyle =hsl(0,50%,+ l +%); context.globalCompositeOperation =饱和度; context.fillStyle =hsl(0,+ sat +%,50%); context.fillRect(x,y,width,height); context.globalCompositeOperation =hue; // hue context.fillStyle =hsl(+ hue +,1%,50%); } context.globalCompositeOperation =destination-in; context.globalCompositeOperation =source-over; }< / script> < / body>< / html>
错误发生在函数
changeColor()
的最后三行: context.globalCompositeOperation =destination-in;
context.drawImage(img,x,y,width,height);
context.globalCompositeOperation =source-over;
删除行 context.drawImage(img,x,y,宽度,高度);
,所有三张照片都可见(请参阅我的示例)。
I figured it out how to change my canvas's color but I have a problem when I put more than one image in my canvas it doesn't appear. I have just one image that appears. Here is the code.
This is when I load my images in '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";
This is the function for changing the color of my canvas
(code adapted from 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";
}
Because I'm not fimilar with Canvas objects and an incomplete code example from questioner, I created my own example. After that I ran step by step through each line and created so a running example:
<html>
<body>
<canvas id="myCanvas" width="700" height="700" style="border: 1px solid red;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d');
var image01 = new Image();
var image02 = new Image();
var image03 = new Image();
image01.onload = function()
{
changeColor(image01, 0, 0, 165, 73, 32, 249.1, 390);
image02.onload = function() {
changeColor(image02, 0, 0, 165, 1, 64, 90, 335);
}
image02.src = "https://1.f.ix.de/scale/geometry/360x202/q75/imgs/09/2/2/5/1/1/9/7/zeroday-d774e8c5b2414e48-b0237d756e9017a9-39b755ca2936afda.jpeg";
image03.onload = function() {
changeColor(image03, 0, 0, 565, 303, 65, 90, 335);
}
image03.src = "https://1.f.ix.de/scale/geometry/696/q75/imgs/18/2/2/5/2/1/4/1/autofly-010b77473b49efc6.jpeg";
};
image01.src = "https://1.f.ix.de/scale/geometry/336/q75/imgs/18/2/2/5/2/1/4/1/image-1499148077454426-aa28a644b6934a51.jpeg";
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 {
context.globalCompositeOperation = l < 100 ? "color-burn" : "color-dodge";
l = l >= 100 ? l - 100 : 100 - (100 - l);
context.fillStyle = "hsl(0, 50%, " + l + "%)";
context.globalCompositeOperation = "saturation";
context.fillStyle = "hsl(0," + sat + "%, 50%)";
context.fillRect(x, y, width, height);
context.globalCompositeOperation = "hue"; //hue
context.fillStyle = "hsl(" + hue + ",1%, 50%)";
}
context.globalCompositeOperation = "destination-in";
context.globalCompositeOperation = "source-over";
}
</script>
</body>
</html>
In my eyes the mistake was in the last three lines in function changeColor()
:
context.globalCompositeOperation = "destination-in";
context.drawImage(img, x, y, width, height);
context.globalCompositeOperation = "source-over";
After I deleted the line context.drawImage(img, x, y, width, height);
, all three pictures are visible (see my example).
这篇关于在一个画布中更改多个图像的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!