Question

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

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

Basically, I would like a semi-opaque gradient instead of a circle... I tried to put the following code in, but to no advail.

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) );

友情链接