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

我想在我的画布上放置可拖动区域，人们可以拖动图像，并且我希望在可放置区域添加一种发光的脉动效果，因此人们很容易选择在哪里他们可以拖动的对象。创建一个脉冲发光效果HTML5 canvas kineticJS

我发现了一些像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);

但不是黑色的，我希望有一个脉冲金行程。

想法？

来源

2012-11-27 Evan

这样吗？ http://stackoverflow.com/questions/4910963/how-to-create-a-pulse-effect-using-web-kit-animation-outward-rings – crowjonah

@crowjonah是那样的，但在画布上没有css – Evan

我不知道你的问题，但其很容易用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-28 08:32:57 Jonke

寻找类似的东西？ 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); 
    }());

来源

2012-11-27 22:12:12

是啊这就是那种效果！ – Evan

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

回答

相关问题