magic canvas depends on jQuery. Include them both in end of your HTML code (TweenLite.min.js is optional ,if you use random-move effect, it should be added):
<!-- TweenLite.min.js is optional -->
<script src="TweenLite.min.js"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="magic-canvas.js" type="text/javascript"></script>the effect needs considerable performance. originally, it's running only on the browsers that requestAnimationFrame is built in. with polyfill, the early browser could work as well, but the best choice is to update the browser to the latest version rather than use fall-backed requestAnimationFrame.
browsers supporting for requestAnimationFrame:
- chrome 31+
- firefox 26+
- IE 10+
- opera 19+
- safari 6+
demo1: heart-beat effect
$.magicCanvas.draw({
lineLen : 30, // length of hive's side
heartBeatCD : 3000, // boom period
heartBeatRange : 300, // boom range
rgb : function (circlePos, heartBeatCenter) {
var px = circlePos.x; // a point on boom circle
var py = circlePos.y;
var hbcx = heartBeatCenter.x;
var hbcy = heartBeatCenter.y;
var dis = Math.pow((px - hbcx), 2) + Math.pow((py - hbcy), 2);
var maxDis = 300 * 300;
var r = parseInt(255 * dis / maxDis);
// do some computation....
return {r:r,g:217,b:203};
},
// rgb: {r:156,g:217,b:249}; // parameter rgb can be a object as well
zIndex:-9999 // stack order
})demo2: random-move
$.magicCanvas.draw({
type:"random-move",
rgb : function (circlePos) {
var px = circlePos.x; // point position
var py = circlePos.y;
// do some computation....
return {r:parseInt(px % 255),g:parseInt(py % 255),b:203};
},
zIndex = -9999; // stack order
})you can click the link on the top of the page to see the demo.
