HTML画布，模糊绘制的多边形

Question

我做了这个（运行下面的片段）

 var Canvas = document.getElementById('c');
    var ctx = Canvas.getContext('2d');

    var resize = function() {
        Canvas.width = Canvas.clientWidth;
        Canvas.height = Canvas.clientHeight;
    };
    window.addEventListener('resize', resize);
    resize();

    var elements = [];
    var presets = {};

    presets.shard = function (x, y, s, random, color) {
        return {
            x: x,
            y: y,
            draw: function(ctx, t) {
                this.x += 0;
                this.y += 0;
                var posX = this.x + + Math.sin((50 + x + (t / 10)) / 100) * 5;
                var posy = this.y + + Math.sin((55 + x + (t / 10)) / 100) * 7;
                ctx.beginPath();
                ctx.fillStyle = color;
                ctx.moveTo(posX, posy);
                ctx.lineTo(posX+random,posy+random);
                ctx.lineTo(posX+random,posy+random);
                ctx.lineTo(posX+0,posy+50);
                ctx.closePath();
                ctx.fill();
            }
        }
    };

    for(var x = 0; x < Canvas.width; x++) {
        for(var y = 0; y < Canvas.height; y++) {
            if(Math.round(Math.random() * 60000) == 1) {
                var s = ((Math.random() * 5) + 1) / 10;
                if(Math.round(Math.random()) == 1){
                    var random = Math.floor(Math.random() * 100) + 10;
                    var colorRanges = ['#8c8886', '#9c9995'];
                    var color = colorRanges[Math.floor(Math.random() * colorRanges.length)];
                    elements.push(presets.shard(x, y, s, random, color));
                }
            }
        }
    }

    setInterval(function() {
        ctx.clearRect(0, 0, Canvas.width, Canvas.height);
        var time = new Date().getTime();
        for (var e in elements)
            elements[e].draw(ctx, time);
    }, 10);

<canvas id="c" width="1000" height="1000"\>

我只需要添加一个功能来在我正在构建的网站上使用它。一些浮动的碎片需要模糊处理以给人以深度感。

Canvas能实现这个功能吗？如果可以，怎么做呢？

- jansmolders86

---

Canvas可以做到这一点吗？如果可以，怎么做呢？请自行尝试探索它。 - hindmost

@markE 我并没有说这是无效的，我只是建议楼主先尝试自己找到解决方案。 - hindmost

@markE 为了让 OP 相信 Canvas 没有现成的函数/方法 - hindmost

@markE 我这里看不出任何犯规。这只是一条评论，而且无论如何都值得阅读 OP 的画布文档。 - hindmost

Answer 1

context.filter = 'blur(10px)';

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

- asdjfiasd

Answer 2

我几个月前使用了这个，也许对您也有用：

var canvas = document.getElementById("heroCanvas");
var canvasContext = canvas.getContext("2d");

var canvasBackground = new Image();
canvasBackground.src = "image.jpg";

var drawBlur = function() {
    // Store the width and height of the canvas for below
    var w = canvas.width;
    var h = canvas.height;
    // This draws the image we just loaded to our canvas
    canvasContext.drawImage(canvasBackground, 0, 0, w, h);
    // This blurs the contents of the entire canvas
    stackBlurCanvasRGBA("heroCanvas", 0, 0, w, h, 100);
}

canvasBackground.onload = function() {
    drawBlur();
}

这里是源代码：http://zurb.com/playground/image-blur-texture

- Majestic

---

我看到了那个，但我不认为它适用于我绘制的多边形。我相信它也会使一切变模糊，而我只想模糊其中的一些。 - jansmolders86

我明白了，但我和你一样在屏幕上移动点时使用了相同的方法。我对特定的点使用了这个函数，所以你可以将其适应到特定的多边形上。在drawBlur函数中添加一个变量，以传递特定图像的值，而不是“heroCanvas”。我还添加了变量来逐渐模糊点。我已经大量修改了这个函数，使其更加适合。你可以调用创建多边形的函数，而不是图像。 - Majestic

@markE 如果不添加图片，它就无法正常工作。而且你还需要构建整个页面，并满足所有基本需求。 - Majestic

@Majestic，好的...所以需要一些组装。你可能想展示你的代码，但不要提供可运行的代码片段，这样人们就不会误认为你正在提供可运行的代码。;-) - markE

@Majestic。没问题！不要使用代码标签，只需将您的代码缩进4个空格，它就可以在Stackoverflow上良好显示。 :-) - markE