1

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

我发现HTML5 canvas 之类的东西可以创建形状的外发光效果，但它不像脉冲那样具有动画效果。

比如这个矩形：

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

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

想法？

4

2 回答 2

1

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

本质上它是使用 sine 函数完成的（下面的代码取自 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);
  }());
于 2012-11-27T22:12:12.803 回答
1

我不确定你的问题是什么，但很容易用 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

于 2012-11-28T08:32:57.627 回答