Question

我正在寻找一种方法来杀死KineticJs中渐变的条带。低对比度黑白渐变看起来很可怕。谢谢你的任何建议。 enter image description here

Answer 1

您可以通过向图像添加Perlin Noise来扩散渐变条带

顺便说一下，这也是你在Photoshop中进行反带的一种方式。

完成渐变画布后，使用低alpha添加一层Perlin Noise，使其不会覆盖原始图像。

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

这就是随机Perlin噪音层的样子：

enter image description here

这是应用了噪音层的原始图像：

enter image description here

一些注意事项：

您可以根据自己的喜好调整context.globalAlpha和RandomNoise（alpha）中的alpha。
每次都可以创建和重复使用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>

Kineticjs渐变条带

1 个答案: