HTML5画布颜料混合颜色工具

问题描述 投票：0回答：2

您好，我需要创建混合颜色工具，我尝试使用 

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/

我需要该工具可以在左侧获取图像： enter image description here

javascript html canvas brush
2个回答
9
投票

您没有说明足够的细节，但以下是如何在画布上使用混合模式。请注意，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}
<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>

0
投票

我已经能够使用 hsl 和 RGB 生成混合矩形，该混合矩形可以以 50fps 的速度从 768by1536 原始像素缩小或精灵化，这可以通过绘制图像或更改网格来进行精灵化或缩小以击中目标。

注释

三份 2A2SL=(添加剂蓝度-

2bitBezierglobalalphaEXIST&CompositeEXIST),Frogger=0.04BitsPP

A-C,A-J,0,A+C,A+J 加 Q=C+J

K12+C,K12+J,C+J,K12+C+Q,K12+J+Q K=K12+Q

I=A+C J=A+J 如果 K1=K2 K12+(c,无),Q,[K12]+(Q+C,Q+J)

A B 可以添加Q并移动图案NWSE

w1 J Q+L12/2 -K1+L12/2=

w2 Q+J Q+L12/2 K1偏移+L12/2=

w3 Q Q+L12/2 L12/2

w4 Q+C Q+L12/2 L1偏移-L12/2=

w5 C Q+L12/2 -L12/2=

它如何在我的 chromebook 上显示 

<!DOCTYPE html>
<html>
<body>
<CANVAS WIDTH="1920" HEIGHT="1536" ID="canvas" tabindex="0">
        </CANVAS><script>
var canvas = document.getElementById('canvas');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext('2d');
var gg=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
                var m = 3,A = 945,E = 0.004,C = 0.005,sJ=3,sK=945,sL=0.005,sM=0.004
ctx.globalAlpha =.375
var dataArray = []
var dataArrayB = []
var L=488,m=0,K=196;
for (i = 0; i < 2688; i += 6) {  
                //mosty 456
                    a = '#';
                    a += gg[4]
                    a += gg[i ^ (i & 4080) ^ i >> 8]
                    a += gg[6]
                    b = '#';
                    b += gg[4]
                    b += gg[5]
                    b += gg[i ^ (i & 4080) ^ i >> 8]
                    var C = E / C * E;
                    var SparcityDDD = (A & 255) + 256
                    A += m;
                    var SparcityD = ((A) & 511) + 948
                    C = E;
                    var WeberD = 0.005*Math.random()
                    E = C / E * C
                    var WeberDDD = 0.005*Math.random()
                    //xw=normal is dot perpendicular*rotational coeffiecient usually small soft body motion=vgeo*xw%+(xvw)
                    Vorticity=24*(i&63)
                    VorticityZ=i>>1
                    VorticityX = (SparcityDDD--);
                    VorticityX *= (2 * (i % 48));
                    VorticityX++;
                    VorticityX *= 6 / WeberDDD;
                    VorticityY = (SparcityD--);
                    VorticityY *= (8 * Math.floor(i / 144));
                    VorticityY++;
                    VorticityY *= 6 / WeberD;
                    que=((Vorticity) & 511)*1.406
                    mue=(Vorticity/2-150)
                    if(que+10>K&&que+10<L){ctx.fillRect((0 * VorticityX + 1.16*VorticityZ)+60 & 2047, (0 * VorticityY + (Vorticity) & 511)*1.406+10,120,15);}
                    ctx.fillStyle = a
                    if(que-13>K&&que-13<L){ctx.fillRect((0 * VorticityX + 1.16*VorticityZ)+60 & 2047, (0 * VorticityY + (Vorticity) & 511)*1.406-13,120,20);}
                    //(50% fade) 80% 2.5,3,2.5,2,3,3,2,2
                    if(mue>K&&mue<L){
                    ctx.fillStyle = ctx.fillStyle = 'hsl(' + i*0.87 + ', 50%, 68%)';//hit majority
                    ctx.fillRect(VorticityZ*1.1+84,Vorticity/2-150, 8, 150);
                    ctx.fillStyle = ctx.fillStyle = 'hsl(' + i*0.87 + ', 50%, 68%)';//hit majority
                    ctx.fillRect(VorticityZ*1.1+104,Vorticity/2-150, 6, 150);
                    }
                    ctx.fillStyle = b
                     if(que-7>K&&que-7<L){ctx.fillRect((0 * VorticityX + 1.16*VorticityZ) & 2047, (0 * VorticityY + (Vorticity) & 511)*1.406-7,120,24);}
                if((que+10>K&&que+10<L)||(que-13>K&&que-13<L)||(mue>K&&mue<L)||(que-7>K&&que-7<L)){
                if (i>1344){
                dataArray.push(i,(mue>K&&mue<(m*i+L))*1,(mue>K&&mue<(m*i+L))*1,(que+10>K&&que+10<(m*i+L))*1,(que-13>K&&que-13<(m*i+L))*1,(que-7>K&&que-7<(m*i+L))*1)
                }else{
                dataArrayB.push(i,(mue>K&&mue<(m*i+L))*1,(mue>K&&mue<(m*i+L))*1,(que+10>K&&que+10<(m*i+L))*1,(que-13>K&&que-13<(m*i+L))*1,(que-7>K&&que-7<(m*i+L))*1)
                }
                }
                }
                alert(dataArrayB);
                alert(dataArray);
</script>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.