Monday, May 9, 2016

HTML5 - Beginners - onmousemove example 

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    var player = {
        x:10,
        y:10,
        w:32,
        h:32,
    };
    
    gameloop=setInterval(dogameloop,16);
    
    function dogameloop(){
        ctx.clearRect(0,0,c.width,c.height);
        ctx.fillStyle="black";
        ctx.font="15px Arial";
        ctx.fillText("Move the mouse on the canvas.",10,10);
        ctx.fillRect(player.x,player.y,player.w,player.h);
                            
    }    
        
    document.onmousemove = function(mouse){
        player.x = mouse.clientX;
        player.y = mouse.clientY;
    }
    
    
    </script></body></html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)