CODEWITHSUNDEEP
javascripthtmlcanvaskineticjs
Evan
Evan

Reputation: 6115

Create a pulsing glow effect HTML5 canvas kineticJS

I want to have droppable areas in my canvas where people can drag images, and I would like to add a glowing, pulsing effect around the droppable area so it is very easy for people to pick out where they can drag the objects.

I've found some things like HTML5 canvas create outer glow effect of shape but that isn't animated like a pulse.

So like this rectangle for example:

  var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

      var layer = new Kinetic.Layer();

      var rect = new Kinetic.Rect({
        x: 239,
        y: 75,
        width: 100,
        height: 50,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 4
      });

      // add the shape to the layer
      layer.add(rect);

      // add the layer to the stage
      stage.add(layer);

But instead of that black, I want a pulsing gold stroke.

Thoughts?

Upvotes: 1

Views: 7493

Answers (2)

Casey Becking
Casey Becking

Reputation: 137

Looking for something like this? http://lamberta.github.com/html5-animation/examples/ch03/05-pulse.html

In essence it is done using the sine function (the code below is taken from lamberta project) and is pretty self explanatory:

 var canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d'),
      ball = new Ball(),
      angle = 0,
      centerScale = 1,
      range = 0.5,
      speed = 0.05;

  ball.x = canvas.width / 2;
  ball.y = canvas.height / 2;

  (function drawFrame () {
    window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);

    ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;
    angle += speed;
    ball.draw(context);
  }());

Upvotes: 1

Jonke
Jonke

Reputation: 6533

I'm not sure what your question is but its quite easy to create a pulse with a circle with kineticjs. Something like this:

var pulserect= rect.clone();
pulserect.setFill('gold');
pulserect.setScale(2,2);
layer.draw();

pulse.transitionTo({
scale:{x:0.5,
       y:0.5},
opacity:0.5,
duration: 0.5
});

jsfiddle

Upvotes: 1

Related Questions