Skip to content

decaywood/MagicCanvas

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

demo1 -- heartbeat

demo2 -- random move

Dependencies

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>

Something you should know

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+

Use like so:

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.

LICENSE

About

a canvas based dynamic background

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published