Kineticjs梯度條帶

進出口尋找一種方式來殺死綁紮在KineticJs梯度。在低對比度黑白漸變上看起來很糟糕。感謝您的任何建議。 enter image description here Kineticjs梯度條帶

2013-06-26 koyotee

您可以通過添加柏林噪聲對圖像

BTW擴散梯度條帶，這也是你會做反綁紮在Photoshop中的一種方式。

梯度畫布完成後，使用低阿爾法添加柏林噪聲一層，因此不會overwelm原始圖像。

// generate noise 
    var noise=perlinNoise(); 

    // reduce the alpha 
    context.globalAlpha=.35; 

    // draw the noise layer over the original canvas 
    context.drawImage(noise,0,0,canvas.width,canvas.height);

這是隨機的柏林噪聲層的樣子：

enter image description here

這是與噪聲層中的原始圖像應用：

enter image description here

的幾點說明：

你可以調整兩個context.globalAlpha和RandomNoise（阿爾法）阿爾法您的口味。
可以創建和重複使用1噪聲層或創建一個新的噪聲層中的每個的時間。
添加噪點會「軟化」原始漸變。
或者，您可以應用輕微的動態模糊濾鏡。
如果你需要有針對性的噪音，就可以申請使用剪切區域（clipFunc）的噪音。

這裏的代碼和一個小提琴：http://jsfiddle.net/m1erickson/p4Vaf/

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Noise</title> 
    <style> 
    #canvas{border:1px solid red;} 
    body(background-color:blue;} 
    </style> 
</head> 
<body> 
    <canvas id="canvas" width=300 height=300></canvas><br> 
    <canvas id="noisecanvas" width=300 height=300></canvas> 
<script> 

    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext('2d'); 
    var noiseCanvas=document.getElementById("noisecanvas"); 


    var img=new Image(); 
    img.onload=function(){ 
     canvas.width=img.width; 
     canvas.height=img.height; 
     noiseCanvas.width=img.width; 
     noiseCanvas.height=img.height; 
     ctx.drawImage(this,0,0,canvas.width,canvas.height); 
     var noise=perlinNoise(); 
     ctx.globalAlpha=.35; 
     ctx.drawImage(noise,0,0,canvas.width,canvas.height); 
    } 
    img.src="gradient.png"; 


    function randomNoise(alpha) { 
     var x = 0; 
     var y = 0; 
     var width = canvas.width; 
     var height = canvas.height; 
     var g = noiseCanvas.getContext("2d"); 
     var imageData = g.getImageData(x, y, width, height); 
     var random = Math.random; 
     var pixels = imageData.data; 
     var n = pixels.length; 
     var i = 0; 

     while (i < n) { 
      pixels[i++] = pixels[i++] = pixels[i++] = (random() * 256) | 0; 
      pixels[i++] = alpha; 
     } 
     g.putImageData(imageData, x, y); 
     return noiseCanvas; 
    } 

    function perlinNoise() { 
     var noise = randomNoise(45); 
     var g = noiseCanvas.getContext("2d"); 
     g.save(); 

     /* Scale random iterations onto the canvas to generate Perlin noise. */ 
     for (var size = 4; size <= noise.width; size *= 2) { 
      var x = (Math.random() * (noise.width - size)) | 0, 
       y = (Math.random() * (noise.height - size)) | 0; 
      g.globalAlpha = 4/size; 
      g.drawImage(noise, x, y, size, size, 0, 0, noiseCanvas.width, noiseCanvas.height); 
     } 

     g.restore(); 
     return noiseCanvas; 
    } 

</script> 
</body> 
</html>

來源

2013-06-27 01:39:12 markE

koyotee：這樣做幫助嗎？ – markE

很好的回答！但噪音似乎對我的目標來說太過分了。無論如何，我會試一試。我喜歡這一點讓它變得模糊的想法。你看起來像一個職業球員，也許你可以幫我解決我的輪換問題，我非常需要它。請看看如果你有時間： [鏈接]（http://stackoverflow.com/questions/17338153/kineticjs-rotate-to-mouseposition）或kineticjs旋轉鼠標位置 – koyotee

Kineticjs梯度條帶

回答

相關問題