HTML5 холст краски смешивания цвета инструмент

Question

Здравствуйте мне нужно создать смешивание цвета инструмент, я стараюсь взять цветной пиксель из холста с getImageData и смешивают с моим выбранным цветом и получить средний цвет, я могу получить его легко:

/* r1 = red channel from getImageData 
    g1 = green channel from getImageData 
    b1 = blue channel from getImageData 

    r2 = red channel my selected color 
    g2,b2 same 
*/ 
var avR = Math.round(0.5*r1 + 0.5*r2); 
var avG = Math.round(0.5*g1 + 0.5*g2); 
var avB = Math.round(0.5*b1 + 0.5*b2); 

Пока я рисую, я пытаюсь смешивать эти цвета, но эффект смешивания недоступен.

Может быть, кто-нибудь может мне помочь? http://jsfiddle.net/b72ky2sc/6/

мне нужно, что инструмент может получить изображение в левой части:

Answer 1

Вы не сообщают достаточно подробностей, но вот как вы можете использовать режимы смешивания с холстом. Обратите внимание, что IE еще не поддерживает ни один из них (кроме normal), поэтому проверьте это в последних версиях Firefox или Chrome.

Все режимы смешивания в текущем обновленном стандарте холста перечислены в раскрывающемся списке, который вы можете использовать для выбора режима. Таким образом, вы можете видеть, какой режим больше всего подходит вам (попробуйте такие вещи, как hard-light с низким значением альфа в начале ...).

(да, я заскучал .. :))

var cont = document.getElementById("spots"),  // UI elements 
 
    canvas = document.getElementById("canvas"), 
 
    alpha = document.getElementById("alpha"), 
 
    modes = document.getElementById("modes"), 
 
    ctx = canvas.getContext("2d"), 
 
    isDown = false,        // defaults 
 
    color = "rgb(107, 122, 174)"; 
 

 
// set up color palette using a custom "Spot" object 
 
// This will use a callback function when it is clicked, to 
 
// change current color 
 
function Spot(color, cont, callback) { 
 
    var div = document.createElement("div"); 
 
    div.style.cssText = "width:50px;height:50px;border:1px solid #000;margin:0 1px 1px 0;background:" + color; 
 
    div.onclick = function() {callback(color)}; 
 
    cont.appendChild(div);  
 
} 
 

 
// add some spot colors to our palette container 
 
new Spot(color, cont, setColor); 
 
new Spot("rgb(107, 174, 170)", cont, setColor); 
 
new Spot("#00f", cont, setColor); 
 
new Spot("#ff0", cont, setColor); 
 
new Spot("#0ff", cont, setColor); 
 
new Spot("#f0f", cont, setColor); 
 

 
// this will set current fill style based on spot clicked 
 
function setColor(c) {ctx.fillStyle = c} 
 

 
// setup defaults 
 
ctx.fillStyle = color; 
 
ctx.globalAlpha = 0.5; 
 

 
// events 
 
canvas.onmousedown = function() {isDown = true}; 
 
window.onmouseup = function() {isDown = false}; 
 
window.onmousemove = function(e) { 
 
    if (!isDown) return; 
 
    var r = canvas.getBoundingClientRect(), 
 
     x = e.clientX - r.left, 
 
     y = e.clientY - r.top; 
 
    
 
    ctx.beginPath(); 
 
    ctx.arc(x, y, 25, 0, 2*Math.PI); 
 
    ctx.fill(); 
 
}; 
 

 
alpha.onchange = function(){ctx.globalAlpha = alpha.value * 0.01}; 
 
modes.onchange = function(){ctx.globalCompositeOperation = modes.value};

body{font:14px sans-serif;background:#333;color:#eee} 
 
#spots {float:right} 
 
#canvas {background:#fff;cursor:crosshair;border:1px solid #777}

<label for="modes">Blending Modes:</label> 
 
<select id="modes"> 
 
    <option value="normal">normal</option> 
 
    <option value="multiply">multiply</option> 
 
    <option value="screen">screen</option> 
 
    <option value="overlay">overlay</option> 
 
    <option value="darken">darken</option> 
 
    <option value="lighten">lighten</option> 
 
    <option value="color-dodge">color-dodge</option> 
 
    <option value="color-burn">color-burn</option> 
 
    <option value="hard-light">hard-light</option> 
 
    <option value="soft-light">soft-light</option> 
 
    <option value="difference">difference</option> 
 
    <option value="exclusion">exclusion</option> 
 
    <option value="hue">hue</option> 
 
    <option value="saturation">saturation</option> 
 
    <option value="color">color</option> 
 
    <option value="luminosity">luminosity</option> 
 
</select> 
 
<label for="alpha">Alpha:</label><input id="alpha" type="range" min=0 max=100 value="50"> 
 
<br> 
 
<canvas id="canvas" width=500 height=500></canvas><div id="spots"></div>