Ответ 1
Вы можете использовать компоновку контекста для замены части изображения.
Например, если у вас есть этот синий логотип уже как изображение:
Любую вы хотите, чтобы верхняя часть логотипа была окрашена в фиолетовый цвет:
Вы можете использовать компоновку, чтобы перекрасить верхнюю часть изображения.
Во-первых, используйте свой любимый редактор изображений, чтобы обрезать любую часть, которую вы dont хотите перекрасить.
Осталось называть оверлей.
Эта оверлейная часть изображения - это то, что мы будем программно перекрашивать.
Этот оверлей можно программно перекрасить в любой цвет.
Как оверлей был программно перекрашен:
- Нарисуйте наложение на пустой холст.
- Установите режим компоновки на "источник".
- Эффект: заменены только существующие пиксели - прозрачные пиксели остаются прозрачными
- Теперь нарисуем прямоугольник любого цвета, покрывающий холст
- (помните, что только существующее наложение будет заменено новым цветом)
Как заполнить логотип с измененным цветом наложения
- Установите режим компоновки на "destination-atop"
- Эффект: заменены только прозрачные пиксели - существующие пиксели остаются неизменными
- Теперь нарисуйте оригинальный логотип
- (помните, что существующее цветное оверлей не будет заменено)
Этот эффект компоновки "destination-atop" иногда называют "рисованием под".
Этот оверлей можно даже заменить текстурами!
Вот код и скрипт: http://jsfiddle.net/m1erickson/bfUPr/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:20px; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var truck,logo,overlay;
var newColor="red";
var imageURLs=[];
var imagesOK=0;
var imgs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/boxTruck.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/TVlogoSmall.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/TVlogoSmallOverlay.png");
loadAllImages();
function loadAllImages(){
for (var i = 0; i < imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){ imagesOK++; imagesAllLoaded(); };
img.src = imageURLs[i];
}
}
var imagesAllLoaded = function() {
if (imagesOK==imageURLs.length ) {
// all images are fully loaded an ready to use
truck=imgs[0];
logo=imgs[1];
overlay=imgs[2];
start();
}
};
function start(){
// save the context state
ctx.save();
// draw the overlay
ctx.drawImage(overlay,150,35);
// change composite mode to source-in
// any new drawing will only overwrite existing pixels
ctx.globalCompositeOperation="source-in";
// draw a purple rectangle the size of the canvas
// Only the overlay will become purple
ctx.fillStyle=newColor;
ctx.fillRect(0,0,canvas.width,canvas.height);
// change the composite mode to destination-atop
// any new drawing will not overwrite any existing pixels
ctx.globalCompositeOperation="destination-atop";
// draw the full logo
// This will NOT overwrite any existing purple overlay pixels
ctx.drawImage(logo,150,35);
// draw the truck
// This will NOT replace any existing pixels
// The purple overlay will not be overwritten
// The blue logo will not be overwritten
ctx.drawImage(truck,0,0);
// restore the context to it original state
ctx.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=500 height=253></canvas>
</body>
</html>
