JAVAScript简单动画~移动方块~setInterval()~碰到边缘弹回

最新推荐文章于 2023-06-25 20:51:27 发布

203最强

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量1.8k

点赞数 1

分类专栏： html~ 文章标签：动画 javaScript实例 canvas setInterval

html~ 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>移动方块</title>
   <section>
   <canvas id="canvas" width="600" height="600"></canvas></section>
   </head>
   <body>
       <script type="text/javascript">
           function draw (id){
           //获取画布id
           var canvas =document.getElementById(id);
           if(canvas==null)
           return false;
           //获取上下文
           var cxt =canvas.getContext("2d");
           var interval=setInterval(function(){move(cxt);},10);
           }
           var x=100;//矩形的x坐标
           var y=100;//矩形的y坐标
           var mx=0;//值为0向右，值为0向左
           var my=0;//值为0向下，值为0向上
           var ml=10;//移动的长度
           var w=20;//矩形的宽
           var h=20;//矩形的高
           var cw=600;//画布的宽
           var ch=600;//画布的高

           function move(cxt){
              cxt.clearRect(0,0,600,600);//在给定的矩形内清除所有的像素为透明
              cxt.fillStyle="#EEEEFF";//把填充颜色设置为指定的颜色
              cxt.fillRect(0,0,600,600);//是用当前的填充风格填充指定的区域
              cxt.fillStyle="red";//把矩形设置为红色
              cxt.fillRect(x,y,w,h);//绘制矩形
           //判断是否到达边缘
           if(mx==0){
                  x=x+ml;//x坐标加上移动长度
                  if(x>cw-w){
                      mx=1;
                  }
              }else{
                  x=x-ml;
                  if(x<=0){
                      mx=0;
                  }
              }
                 if(my==0){
                  y=y+ml;
                  if(y>ch-h){
                      my=1;
                  }
              }else{
                  y=y-ml;
                  if(y<=0){
                      my=0;
                  }
              }
           }
           window.addEventListener("load",draw("canvas"),true);
       </script>
   </body>
</html>

203最强

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JAVAScript简单动画~移动方块~setInterval()~碰到边缘弹回

function draw (id){ //获取画布id var canvas =document.getElementById(id); if(canvas==null)
复制链接

扫一扫