[英]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 {
// 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";
}
因為我對Canvas對象和來自發問者的不完整代碼示例不滿意,所以我創建了自己的示例。 之后,我一步一步地遍歷每一行,並創建了一個運行中的示例:
<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>
在我看來,錯誤在於函數changeColor()
的最后三行:
context.globalCompositeOperation = "destination-in";
context.drawImage(img, x, y, width, height);
context.globalCompositeOperation = "source-over";
在刪除行context.drawImage(img, x, y, width, height);
,所有三張圖片都是可見的(請參見我的示例)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.