画布和全局复合操作

Question

嘿，我有下面的代码，它可以给你“面具”的效果。

JSFiddle： http://jsfiddle.net/neuroflux/m5Fj2/7/

基本上，我会就像半透明的渐变而不是圆形...... 我尝试输入以下代码，但没有成功。

grad = ctx.createRadialGradient(0,0,0,0,0,600); 
  grad.addColorStop(0, '#000');
  grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');

  // assign gradients to fill
  ctx.fillStyle = grad;

  // draw 600x600 fill
  ctx.fillRect(0,0,600,600);

但我无法让它工作:'(

帮助（请！）。

Answer 1

首先，

        tmpCanvas = document.createElement('canvas');
        tmpCanvas.width = c.width;
        tmpCanvas.height = c.height;

        tmpCtx = tmpCanvas.getContext('2d');

这是一种你永远不想在循环中做的事情。现在您每 40 毫秒创建一个新画布！太疯狂了！

其次，如果你想要半透明的渐变，为什么不使用 globalCompositeOperations 而只使用半透明的颜色呢？

将 Alpha 添加到颜色中，如下所示：

 // half transparent
grad.addColorStop(0, 'rgba(0,0,0,.5)');
grad.addColorStop(1, 'rgba(' + color + ', ' + color + ', ' + color + '0.5)');