تحكم بموضع الرسوم دخل canvas

السلام عليكم

- لتحريك الرسوم داخل الـ canvas عليك بإعادة رسمه من جديد مع تغيير موضع العنصر المراد تحريكه .

- لجلب حدث الضغط على المفاتيح سنستخدم الدالة keydown في مكتبة jQuery والكود البسيط التالي يوضح الطريقة المستخدمة للتحريك :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script>
        $(function(){
        
            var myCanvas = $("#myCanvas")[0];
            var c2d = myCanvas.getContext("2d");
            var movx = 0;
            var movy = 0;
            
            // دالة إلتقاط حدث الضغط على مفاتيح الإتجاهات
            $(document).keydown(function(e){
                var key = e.which;
                if(key == "37") {
                    movx--;
                }else if(key == "38") {
                    movy--;
                }else if(key == "39") {
                    movx++;
                }else if(key == "40") {
                    movy++;
                }
                draw();
            });
            
            draw();
            
            // دالة الرسم
            function draw(){
                c2d.fillStyle = "#EEE";
                c2d.fillRect(0, 0, $("#myCanvas").width(), $("#myCanvas").height());
                c2d.fillStyle = "#B33";
                c2d.fillRect(movx*15, movy*15, 15, 15);
            }
            
        });
    </script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200" style="border: 2px solid #3B3;"></canvas>
</body>
</html>