canvas动画效果..高手指点

已经在canvas画布上画出了类似九宫格的形状：
现在想这九个小方块按照设定的轨迹移动最后定格。轨迹没有写 我想知道是怎么样的步骤
贴出代码：function getCursorPosition(e){
    var x;
    var y;
    if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
    }else{
        //the position relativeto the docment
        x = e.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
    }
    //coordiantes to the canvas
    var c = document.getElementById("logo");
    x -= c.offsetLeft;
    y -= c.offsetTop;
    
    //if the mouse position 
    if(x>=368 && x<=400 && y>=10 && y<=50){
        c_context = c.getContext("2d");
        //there have a block box to discovery the text "H"
        c_context.fillStyle = "#323232";
        c_context.beginPath();
        c_context.moveTo(368,10);
        c_context.lineTo(400,10);
        c_context.lineTo(400,50);
        c_context.lineTo(368,50);
        c_context.fill();
        
        //there have nine orange box instead if the text "H"
        c_context.fillStyle = "#f99405";
        for(i = 370 ;i<411; i+=14){
          for(j=10; j<51;j+=14){
                c_context.beginPath();
                c_context.moveTo(i,j);
                c_context.lineTo(i+13,j);
                c_context.lineTo(i+13,j+13);
                c_context.lineTo(i,j+13);
                c_context.fill();
                //the boxes move to anywhere they want
                //这里是想加的代码 但不知道怎么写。(每画出一个小方块就按照预定的轨迹移动)            }
        }
        
        
        
    }
}这个方法的是根据鼠标在canvas上的坐标来判断是否执行小方块的运动轨迹

解决方案 »

  1.   

    我把代码改了下.... 最简单的 小方块的移动<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Playing with Canvas</title>
    <script type="text/javascript" >
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            context.fillStyle = "#f99405";
            for( i=0;i<100;i++){
                context.restore();
                context.beginPath();
                context.moveTo(i,i);
                context.lineTo(i+10,i);
                context.lineTo(i+10,i+10);
                context.lineTo(i,i+10);
                context.fill();
                context.save();
                context.translate(1,0);
                context.clearRect(i,i,i+10,i+10);
             }
        }</script>
    <body>
        
        <canvas id="canvas"></canvas>
    </body>
    </html>那位帮忙改一下 
      

  2.   

    动画其实就是一帧一帧的画面，也就是说，你需要用js不停的修改画布，就行了。参考：https://developer.mozilla.org/cn/Canvas_tutorial/Basic_animations
      

  3.   

    你可以考虑将你的小方块设计为一个类,然后9个小方块就是9个对象,每个对象都有x,y记录当前的坐标,然后计算出下一步会移动哪个坐标,然后将小方块擦掉,绘制到下一个坐标上.可以参考我写的俄罗斯方块中的Rect类http://topic.csdn.net/u/20120211/00/a6595ac9-2d18-49ad-9e6d-5cf63db0eb05.html?33121
      

  4.   

    http://topic.csdn.net/u/20110924/03/4fa45766-c558-4654-939f-a43dda1339f1.htmlhttp://topic.csdn.net/u/20120228/17/52e7688d-7a9c-498d-bac9-7de59a3fcc27.html
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Playing with Canvas</title>
    <script type="text/javascript" >
        window.onload = function(){
            
            
            setInterval(move1,100);
            
            var cxt = document.getElementById("canvas").getContext('2d');
            
            cxt.fillStyle="#f99405";
            
            cxt.translate(50,50);
            
            setInterval(move2,100);
                
                
        }
        
        function move1(){
            var cxt = document.getElementById("canvas").getContext('2d');
            
            cxt.fillStyle="#f99405";
            
            cxt.save();
            
            //cxt.fillRect (0,0, 20,20);
             
            cxt.clearRect(0,0,20,20);
            
            cxt.translate(1,0);
            
            cxt.fillRect (0,0, 20,20);
            
           
            
            
      } 
      
      function move2(){
            var cxt = document.getElementById("canvas").getContext('2d');
            
            cxt.fillStyle="#f99405";
            
            cxt.save();
            
            cxt.clearRect(0,0,20,20);
            
            cxt.translate(1,0);
             
            cxt.fillRect (0,0, 20,20);
            //cxt.fillRect (0,0, 20,20);
    }
      
      
            
        
        
     </script>
    <body>
        
        <canvas id="canvas"></canvas>
    </body>
    </html>
    请问 这段代码是逻辑有错吗？ 为什么只有一个小方块在运行.????
      

  6.   

    肯定有错误看来楼主 js工地不够啊
    你的move1和move2条用的都是同一个画布 你说能画出两个图形吗?