Animowane tło z <canvas>

Ostatnio eksperymentowałem z nowym elementem html5 – <canvas>. Chciałem uzyskać jakieś ciekawe animowane tło dla strony. Sukcesu artystycznego nie odniosłem ale źródła zamieszczam pro publico bono.

Pliki można dowolnie modyfikować. Do działania wymagają jQuery.

Przykładowe użycie:

<script language="JavaScript" type="text/javascript" src="tlo_mosaic.js"></script>
<script language="JavaScript" type="text/javascript">
var tlo;
$(document).ready(function() {
    tlo = new Tlo("container");
    /* Poniższa funkca jest opcjonalna. Spowoduje ona, że animacja
    będzie reagowała na kursor */
    $("#container").mousemove(function(e) {
        tlo.move(e.clientX-$("#container").offset().left,e.clientY);
    });
});
</script>
<div id="container"></div>

Źródła i przykłady:

Leave a Reply

Your email address will not be published. Required fields are marked *