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浏览器中进行测试。

下拉菜单中列出了当前修订的画布标准中的所有混合模式，您可以用来选择模式。 这样一来，您可以查看哪种模式最适合您的需求（尝试使用像Alpha值较低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>