个回答

• Harbeth丶R

  2016-12-05 22:19:50

  如果你的代码和教程一致的话，在画海葵之前要先清理画布。在

  aneObj.prototype.draw = function () {

  ctx.clearRect(0,0,画布宽，画布高);//加上这个

  }
  

  0

• _知更鸟

  2016-11-07 17:40:24

  
  

  /**

   * ane.js

   */

  var aneObj = function()

  {

      this.x = [];

      this.len = [];

  };

  aneObj.prototype.num = 50;

  aneObj.prototype.init = function () {

      for(var i = 0;i<aneObj.num;i++){

          this.x[i] = i * 16 + Math.random()*20;

          this.len[i] = 200 + Math.random()*50;

      }

  };

  aneObj.prototype.draw = function () {

      ctx2.save();

      ctx2.globalAlpha = 0.6;

      ctx2.strokeStyle='#3b154e';

      ctx2.lineCap='round';

      ctx2.lineWidth = 10;

      for(var i = 0;i<50;i++){

          ctx2.beginPath();

          console.log('begin draw');

          ctx2.moveTo(this.x[i],canHeight);

          ctx2.lineTo(this.x[i],canHeight-this.len[i]);

          ctx2.stroke();

          console.log('over draw');

      }

      ctx1.restore();

  };

  
  

  
  

  /**

   * main.js

   */

  document.body.onload = game;

  var can1;

  var can2;

  var ctx1;

  var ctx2;

  
  

  var canWidth;

  var canHeight;

  
  

  var lasttime;

  var deltatime;

  
  

  var bgPic = new Image();

  var ane;

  
  

  var fruit;

  function game(){

      init();

      lasttime = Date.now();

      deltatime = 0;

      gameloop();

  }

  function init(){

      can1 = document.getElementById('can1');//z-index = 1 最外层  鱼  浮游物  ui  特效

      ctx1 = can1.getContext('2d');

      can2 = document.getElementById('can2');//背景  海葵  果实

      ctx2 = can2.getContext('2d');

  
  

      bgPic.src = './src/background.jpg';

  
  

      canWidth = can1.width;

      canHeight = can1.height;

      ane = new aneObj();

      ane.init();

      fruit = new fruitObj();

      fruit.init();

      console.log("main---fruil.init");

  }

  function gameloop(){

  
  

      window.requestAnimationFrame(gameloop);

  
  

          var now = Date.now();

          deltatime = now - lasttime;

          lasttime = now;

  
  

          drawBackground();

          ane.draw();

  
  

          fruit.draw();

  
  

  
  

  
  

  }

  
  

  现在果实也没有显示   搞不明白

  
  

  0

• 忧郁的红姐姐

  2016-11-07 16:20:01

  gameloop里第一句没分号，且不同浏览器不同对象  应该这样写

  window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                  window.setTimeout(callback, 1000 / 60);//定义每秒执行60次动画
              };
  })();

  这样还不行的话，只能看你的全部代码  查查看了
  

  0

• 忧郁的红姐姐

  2016-11-07 15:47:24

  设置canvas画笔对象属性要在画之前，设置完再画，才有作用效果的

  0

• 忧郁的红姐姐

  2016-11-07 15:46:17

  ctx2.save();
  	ctx2.globalAlpha = 0.6;
  	ctx2.strokeStyle = "#3b154e";
  	ctx2.lineCap = "round";
  	ctx2.lineWidth = 20;
  	for(var i = 0; i < this.num; i++){
  		ctx2.beginPath();
  		ctx2.moveTo(this.x[i], canHeight);
  		ctx2.lineTo(this.x[i], canHeight - this.len[i]);
  		ctx2.stroke();
  	}
  	ctx2.restore();

  0