模糊畫布元素？

Question

有沒有簡單的方法來模糊http://codepen.io/Thisisntme/pen/YXgGQG？它的處理寫入，然後放到畫布上，所以你可以使用html5或處理js。

繼承人的HTML，

<div id="backgroundstuff"> 
<script type="text/processing" data-processing-target="canv"> 
    //Create array of circles 
    float oldFPS = 0; 
ArrayList<Circle> back = new ArrayList<Circle>(); 
int rand = random(0,255); 
final int PARTICLES = 50; 
void setup() { 

    smooth(1); //antialias 
    size(500, 500); 
    colorMode(HSB); 
    for (int i = 0; i < PARTICLES; i++) { //add circle objects to array 
    back.add(new Circle(
    random(0, width), //x 
    random(0, height), //y 
    random(100, 200), //radius 
    random(0, 360), //direction circle is pointing in 
    random((150+rand)%255, (255+rand)%255), //hue 
    60 //opacity (alpha) 
    )); 
    } 
} 

void draw() { 
background(255); //clear 
    fill(0, 0, 255, 255); 



    for (int i = 0; i<back.size(); i++) { 
    back.get(i).render(1); //render circles input is speed 
    } 
    drawLines(back); 
    if(oldFPS!=frameRate){ 
    console.log(frameRate); 
    } 
    oldFPS = frameRate; 

} 

public void drawLines(ArrayList<Circle> circles) { 
    stroke(0, 0, 0, 255); 
    for (int i = 0; i < circles.size()-1; i++) { 
    Circle c = circles.get(i);//current circle 

    for (int z = i; z < circles.size(); z+=1) { 
     Circle f = circles.get(z); //other circle 

     if (distance(c.getX(), c.getY(), f.getX(), f.getY()) < 100) { 
     stroke(0, 0, 0, 255); 
     strokeWeight(2); 
     line(c.getX(), c.getY(), f.getX(), f.getY()); 
     } else if(distance(c.getX(), c.getY(), f.getX(), f.getY()) < 150){ 
     strokeWeight(1); 
     stroke(0, 0, 0, 255); 
     line(c.getX(), c.getY(), f.getX(), f.getY()); 
     } 

    } 
    } 
} 
public float distance(float a, float b, float c, float d) { 
    return sqrt(((a-c)*(a-c))+((b-d)*(b-d))); //a^2+b^2=c^2 
} 

public class Circle { 
    float xPos, yPos, rad, dir, hue, opacity; 
    public Circle(float x, float y, float radius, float direction, float inhue, float alpha) { 
    xPos = x; 
    yPos = y; 
    rad = radius; 
    dir = direction; 
    hue = inhue%255; 
    opacity = alpha; 
    } 
    public float getX() { 
    return xPos; 
    } 
    public float getY() { 
    return yPos; 
    } 
    public void render(float Speed) { 
    float dirRadian = radians(dir); //so I dont have to deal with radians. 
    if (yPos < 0 || yPos > width) { // bounce off top or bottom 
     dir*=-1; 
     dirRadian = radians(dir); 
     xPos += Speed*cos(dirRadian); 
     yPos += Speed*sin(dirRadian); 
    } 
    if (xPos < 0 || xPos > height) { //bounce off left or right 
     dir = 180-dir; 
     dirRadian = radians(dir); 
     xPos += Speed*cos(dirRadian); 
     yPos += Speed*sin(dirRadian); 
    } 
    fill(hue, 255, 255, opacity); 
    noStroke(); 
    drawCircle(xPos, yPos, rad); 
    xPos += Speed*cos(dirRadian); //moveX 
    yPos += Speed*sin(dirRadian); //moveY 
    } 
    private void drawCircle(float xPos, float yPos, float rad) { 
    ellipse(xPos, yPos, rad, rad); 
    } 
} 



</script> 
    </div> 
<canvas id="canv"></canvas> 

和繼承人的（很簡單），CSS

canvas { 
outline: 0px; 
position: absolute; 
left: 0px; 
top: 0px; 
width: 100%; 
height: auto; 
} 

哦，這將是很好，如果你可以發佈與模糊分支版本。

Answer 1

您可以使用CSS3 filter:blur

-webkit-filter: blur(10px); 
-moz-filter: blur(10px); 
-o-filter: blur(10px); 
-ms-filter: blur(10px); 
filter: blur(10px); 

http://codepen.io/anon/pen/KpEWzR

的CSS3屬性目前不IE雖然支持：http://caniuse.com/#feat=css-filters