javascript - 模糊 Canvas 元素？

Question

有没有简单的方法来模糊http://codepen.io/Thisisntme/pen/YXgGQG ？它是用processing写的，然后放到 Canvas 上，所以你可能会用html5或者processing 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;
}

哦，如果你能发布一个带模糊的 fork 版本就好了。

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

IE 当前不支持 CSS3 属性:http://caniuse.com/#feat=css-filters