HTML5画布涂料混色工具

您好我需要创建混合颜色工具,我尝试从画布中获取颜色像素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/

我需要该工具可以在左侧获取图像:

您没有说明足够的细节,但这里是如何使用画布的混合模式.请注意,IE不支持其中任何一个(除了normal),因此请在最近的Firefox或Chrome中对此进行测试.

当前修订的画布标准中的所有混合模式都列在可用于选择模式的下拉列表中.通过这种方式,您可以看到哪种模式最适合您的需求(尝试hard-light使用低alpha值作为开始...).

(是的,我很无聊.. :))

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}

Blending Modes:

  normal
  multiply
  screen
  overlay
  darken
  lighten
  color-dodge
  color-burn
  hard-light
  soft-light
  difference
  exclusion
  hue
  saturation
  color
  luminosity

Alpha: