Canvas и globalCompositeOperations

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 и просто использовать полупрозрачные цвета?

Добавить альфа к цветам,как это:

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