Question

我希望在我的画布中有人可以拖动图像的可放置区域，我想在可放置区域周围添加一个发光的脉冲效果，这样人们就可以很容易地找出可以拖动对象的位置。

我发现了一些像HTML5 canvas create outer glow effect of shape这样的东西，但它不像脉冲一样动画。

就像这个矩形一样：

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

但是，不是那种黑色，我想要一个脉冲的金色笔触。

思想？

Answer 1

正在寻找这样的东西？ http://lamberta.github.com/html5-animation/examples/ch03/05-pulse.html

本质上它是使用正弦函数完成的（下面的代码取自lamberta项目）并且非常自我解释：

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

Answer 2

我不确定你的问题是什么，但很容易创建一个带有kineticjs圆圈的脉冲。像这样：

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

创建一个脉冲发光效果HTML5画布kineticJS

2 个答案: