html5 canvas animation basics tutorial for beginners javascript programming lesson




Lesson Code: http://www.developphp.com/video/HTML/Canvas-Animation-Basics-Tutorial
Learn the entry level basics of animation programming on the HTML5 canvas element using Javascript to perform the animated effect. The 3 basic steps to canvas tag animation programming are (1) Draw your assets (2) Clear the canvas (3) Redraw your assets into a new location or state of being. Your animation speed and fluidity depends on the time interval you set for a setTimeout() or setInterval() method in Javascript. It also depends on the incremental factors of any animations.

Original source


23 responses to “html5 canvas animation basics tutorial for beginners javascript programming lesson”

  1. I enjoyed this lesson. One question though, I noticed my ctx.fillStyle ="rgba (0,200,0,1)"; was grayed out when I added the quotations giving me a black box animation that otherwise worked fine. Also when I removed the quotations and hit the draw button,nothing happened. If anyone has suggested fixes, I am all ears.

  2. Why This DOsent Work ??
    If I saved the
    <script type="text/javascript">
    function canvasFunction() {
    var x=0;
    var y=0;
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,30,30);

    ctx.fillStyle = "red";

    x +=1;
    ctx.fillRect(x,50, 30,30);
    timerFor();

    }
    function timerFor() {
    setTimeout(canvasFunction,200);
    }
    </script>

Leave a Reply