javascript - 如何使用 canvas 和 javascript 创建运动模糊效果？

Question

我有一个带有绘制图标的虚拟 Canvas 。这个图标是动态的，所以我不能在 Photoshop 中制作这个图标的运动模糊变体。我通过这段代码在场景中渲染这个图标:

function render (context) {
    context.drawImage(this.bufferedIcon, 0, 0);
}

你能告诉我是否有一种简单的方法来创建这个图标的运动模糊吗？

Answer 1

要进行简单的运动模糊，请使用 globalAlpha

var ctx = document.getElementById("can").getContext("2d");


// dx and dy is the direction and speed of the blur
function drawBlured(x,y,dx,dy){ // x,y current position, dx,dy delta x,y 
     var samples = 10;  // the number of samples. The greater the number the 
                       // better the effect but the slower the render
                       // over 100 samples and the dynamic range of colours 
                       // will begin to make it look bad
     dx /= samples;   // divide the speed by the number of samples
     dy /= samples;
     ctx.globalAlpha = 1/(samples/1.2);  // set the global alpha need to up the 
                                       // val a bit or it gets to dark
     for(var i = 0; i < samples; i++){  // draw  the image for each sample
         ctx.drawImage(image, x+i*dx,y+i*dy); // moving it as we go
     }
     ctx.globalAlpha = 1;  // restore alpha
} // done;


// code from here down is just for the snippet
var posX= 200;
var posY = 200;
var speedX,speedY
var destX,destY;

// create somthing to blur
var image = document.createElement("canvas");
image.width = 100;
image.height =100;
var ctxS = image.getContext("2d");
ctxS.fillStyle = "Black";
ctxS.beginPath();
ctxS.arc(50,50,48,0,Math.PI*2);
ctxS.fill();

ctxS.beginPath();
ctxS.fillStyle = "#FF0";
ctxS.arc(48,48,44,0,Math.PI*2);
ctxS.fill();

ctxS.fillStyle = "Black";
ctxS.beginPath();
ctxS.arc(25,25,20,0,Math.PI*2);
ctxS.fill();
ctxS.beginPath();
ctxS.arc(75,25,20,0,Math.PI*2);
ctxS.fill();
ctxS.beginPath();
ctxS.arc(50,80,10,0,Math.PI*2);
ctxS.fill();

ctxS.beginPath();
ctxS.fillStyle = "white";
ctxS.arc(25,25,16,0,Math.PI*2);
ctxS.fill();
ctxS.beginPath();
ctxS.arc(75,25,16,0,Math.PI*2);
ctxS.fill();

ctxS.beginPath();
ctxS.fillStyle = "black";
ctxS.arc(25,25,8,0,Math.PI*2);
ctxS.fill();
ctxS.beginPath();
ctxS.arc(75,25,8,0,Math.PI*2);
ctxS.fill();


var moving = false; // when moving
var wait = 10;  // a pause timer
function update(){
  ctx.clearRect(0,0,400,400);  // clear
  if(moving){  // draw moving
    drawBlured(posX,posY,speedX,speedY);
    posX += speedX;
    posY += speedY;
    wait -= 1;
    if(wait <= 0){ // done moving pause
      moving = false;
      wait = Math.random()*10+5;
    }
  }else{
    if(wait > 0){  // wait 
      wait -= 1;
      ctx.drawImage(image,posX,posY);

    }else{ // done waiting find a spot to move
      destX = (Math.random()*300)+50;
      destY = (Math.random()*300)+50;        
      speedX = (destX-posX)/5;
      speedY = (destY-posY)/5;        
      ctx.drawImage(image,posX,posY);
      wait = 5;
      moving = true;   // start movng

    }
  }
  setTimeout(update,50);  // do this 20 times a second
}
update();

.canC {
  width:400px;
  height:400px;
 }

<canvas class="canC" id="can" width=400 height=400></canvas>

并且不要使用滤镜来模糊。它们的效率低得令人 NumPy ，它在您的 PC 上可能看起来不错，但在许多机器上它会死机并且看起来很糟糕。