甘亚臣-第一周总结

阅读数：1502 发布时间：2016-09-10 21:07:22

作者：w4gyc 标签： w4gyc 总结收获不足 canvas

第一周总结

快速适应生活和学习环境。生活两点一线、定时定点，个人感觉又找到了高中生活的影子，每天学习新知识，接触、分析、练习、总结、掌握，总体下来每一天都很充实。
收获。第一天我们对一个星期下来我们使得我对前端有了更深层次的理解，要想成为一名合格的前端工程师，需要细致、快速学习、机智分析（这会帮你省下很多时间）、大局观与定期总结。相关知识学习：linux系统、markdown、高保真布局分析、chrome控制台使用、专业英语单词、浏览器原理、http协议、sui、git基础知识、css思维导图分析、html5 API（着重对canvas进行了练习）、js理论与练习（画图形）、架构基础；

不足。基础知识不扎实，练习的少，学习不够系统使得各种知识没有形成联系，进而导致一知半解，没有养成定期总结的习惯，尤其是利用思维导图的形式进行分析与总结，这种方法不仅能更快理清思绪、还能使相关知识联系起来帮助记忆。

贪吃蛇游戏（存在不足：每次擦除蛇尾，虽然使得擦除不用遍历数组，但是蛇不能掉头；代码还需精简）：

 <html>
 <head>
   <meta charset="utf-8">
   <title></title>
   <style media="screen">
    .wrap{
      display: block;
      margin: 0 auto;
    }
    #canvas{
      display: block;
      margin: 0 auto;
    }
    .button{
      display: block;
      margin: 0 auto;
    }
   </style>
  <script type="text/javascript">
  var arr = [{"x": '100', "y": '100'}, {"x": '125', "y": '100'}];
  function paint(){
    var canvas = document.getElementById("canvas")
    var ctx = canvas.getContext("2d");
    for(var n = 0; n <= 24; n++){
      ctx.beginPath();
      ctx.moveTo((25 * n), 0);
      ctx.lineTo((25 * n), 600);
      ctx.closePath();
      ctx.stroke();
    }
    for(var m = 0; m <= 24; m++){
      ctx.beginPath();
      ctx.moveTo(0, (25 * m));
      ctx.lineTo(600, (25 * m));
      ctx.closePath();
      ctx.stroke();
    }
  }
  function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        paint();
        ctx.fillStyle='rgb(250, 0, 0)';
        for(var i = 0; i <=arr.length-1; i++){
          ctx.fillRect(arr[i].x, arr[i].y, 25, 25);
        }

      }
  }
    document.onkeydown = function(e){
      var direction = e.keyCode;
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        switch (direction) {
          case 37:
          ctx.clearRect(arr[arr.length-1].x, arr[arr.length-1].y, 25, 25);
          paint();
          arr[1].x = arr[0].x;
          arr[1].y = arr[0].y;
          arr[0].x -= 25;
          ctx.fillStyle = 'rgb(250, 0, 0)';
          for(var i = 0; i <= arr.length-1; i++){
            ctx.fillRect(arr[i].x, arr[i].y, 25, 25);
          }
            break;

            case 38:
            ctx.clearRect(arr[arr.length-1].x, arr[arr.length-1].y, 25, 25);
            paint();
            arr[1].x = arr[0].x;
            arr[1].y = arr[0].y;
            arr[0].y -= 25;
            ctx.fillStyle = 'rgb(250, 0, 0)';
            for(var i = 0; i <= arr.length-1; i++){
              ctx.fillRect(arr[i].x, arr[i].y, 25, 25);
            }
              break;

              case 39:
              ctx.clearRect(arr[arr.length-1].x, arr[arr.length-1].y, 25, 25);
              paint();
              arr[1].x = arr[0].x;
              arr[1].y = arr[0].y;
              arr[0].x += 25;
              ctx.fillStyle = 'rgb(250, 0, 0)';
              for(var i = 0; i <= arr.length-1; i++){
                ctx.fillRect(arr[i].x, arr[i].y, 25, 25);
              }
                break;

                case 40:
                ctx.clearRect(arr[arr.length-1].x, arr[arr.length-1].y, 25, 25);
                paint();
                arr[1].x = arr[0].x;
                arr[1].y = arr[0].y;
                arr[0].y += 25;
                ctx.fillStyle = 'rgb(250, 0, 0)';
                for(var i = 0; i <= arr.length-1; i++){
                  ctx.fillRect(arr[i].x, arr[i].y, 25, 25);
                }
                  break;
          default:
        }

      }
    }

     </script>
     </head>
     <body>
       <div class="wrap">
            <canvas id="canvas" width="600" height="600"></canvas>
       </div>
       <button type="button" name="button" onclick="draw()">start</button>
     </body>
    </html>

canvas教程

view欣赏