本文介绍了HTML5画布颜料混合颜色工具的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

你好,我需要创建混合颜色工具,我尝试使用 getImageData 从画布中获取颜色像素,并与我选择的颜色混合并获得平均颜色,我可以轻松获得它:

Hello i need create blending color tool, i try take color pixel from canvas with getImageData and mixed with my selected color and get average color, i can get it with easy:

/* 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);

在我绘画时,我尝试混合了这种颜色,但没有混合效果。

While i drawing i try mixed this colors, but blending effect not available..

也许有人可以帮助我?

Maybe somebody can help me?http://jsfiddle.net/b72ky2sc/6/

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

i need that tool can get image in left side:

推荐答案

您没有说明足够的详细信息,但是这里是如何在画布上使用混合模式。请注意,IE还不支持其中的任何一种( normal 除外),因此请在最近的Firefox或Chrome浏览器中进行测试。

You don't state enough details, but here is how you can use blending modes with canvas. Note that IE do not support any of these yet (except from normal) so test this in recent Firefox or Chrome.

下拉菜单中列出了当前修订的画布标准中的所有混合模式,您可以使用该模式来选择模式。这样,您可以查看哪种模式最适合您的需求(尝试使用较低的强光之类的东西……)。

All blending modes in the current revised canvas standard is listed in the drop-down you can use to select mode. This way you can see which mode suits your need most (try things like hard-light with a low alpha value as a start...).

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

(yeah, I got bored.. :) )

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>

这篇关于HTML5画布颜料混合颜色工具的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 03:59
查看更多