注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端开发那点事儿

冒犯之处,敬请谅解。

 
 
 

日志

 
 
 
 

HTML5 CANVAS动画练习  

2012-04-12 10:43:04|  分类: web |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

三步走:更新(位置坐标),查出,绘图

var x = 0;
            var y = 0;
            var canvas = document.getElementById('remind');
            var context = canvas.getContext("2d");

            var canvasWidth = canvas.width;
            var canvasHeight = canvas.height;
            context.fillStyle = "rgb(255,0,0)";
            context.fillRect(x,y,10,10);
            var followX = true;
            var followY = false;
            var direction = 'right';
            
            function animate(){
                switch(direction){
                    case 'right':
                        x++;
                        context.clearRect(0,0,canvasWidth,canvasHeight);
                        if(x == (canvasWidth - 10)){
                            direction = 'bottom';
                            y++;
                        }
                        context.fillRect(x,y,10,10);
                        break;
                    case 'bottom':
                        y++;
                        context.clearRect(0,0,canvasWidth,canvasHeight);
                        if(y == (canvasHeight - 10)){
                            direction = 'left';
                            x++;
                        }
                        context.fillRect(x,y,10,10);
                        break;
                    case 'left':
                        x--;
                        context.clearRect(0,0,canvasWidth,canvasHeight);
                        if(x == 0){
                            direction = 'top';
                            y++;
                        }
                        context.fillRect(x,y,10,10);
                        break;
                    case 'top':
                        y--;
                        if(y == 0){
                            clearInterval(animateObj);
                            context.clearRect(0,0,canvasWidth,canvasHeight);
                            context.fillRect((canvasWidth / 2 - 25),(canvasHeight / 2 - 25),50,50);
                        }else{
                            context.clearRect(0,0,canvasWidth,canvasHeight);
                            context.fillRect(x,y,10,10);
                        }
                        break;
                }
            }

            var animateObj = setInterval(animate,5);
  评论这张
 
阅读(844)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018