海葵不出来

来源:2-3 海葵绘制

xiaxiaaichixia

2016-11-24 12:24

JavaScript编译时Chrome报告Uncaught TypeError: undefined is not a function错误,

写回答 关注

3回答

  • 慕的地6863477
    2017-02-25 20:13:24

    我也有这个错误 后来发现 是我的分号用了中文写

  • xiaxiaaichixia
    2016-11-25 21:04:24

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta charset="utf-8">

    <title>tinyHeart</title>

    <style type="text/css">

    body {

    padding-top: 10px;

    }

    .all_bg{

    width: 800px;

    height: 600px;

    margin: 0px auto;

    }

    #allcanvas{ 

    position: relative;

    width: 800px;

    height: 600px;

    margin: 0px;

    }

    #canvas1{

    position: absolute;

    bottom: 0;

    left: 0;

    z-index: 1;

    }

    #canvas2{ 

    position: absolute;

    bottom: 0;

    left: 0;

    z-index: 0;

    }

    </style>   

    </head>

    <body>

    <div class = "all_bg">

    <div id="allcanvas">

    <canvas id ="canvas1" width ="800" height ="600"></canvas> 

    <canvas id ="canvas2" width ="800" height ="600"></canvas>

    </div>

    </div>

    <script type="text/javascript" src = "js/main.js"></script>

    <script type="text/javascript" src = "js/commonFunctions.js"></script>

    <script type="text/javascript" src = "js/background.js"></script>

    <script type="text/javascript" src = "js/ane.js">

    </script>

    </body>

    </html>


    var aneObj = function()

    {

    this.x = [];

    this.len = [];

    }

    aneObj.prototype.num = 50;

    aneObj.prototype.init = function()

    {

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

      {

      this.x[i] = i * 20 + Math.random()*20;//[0,1)

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

      }

    }

    aneObj.prototype.draw = function()

    {

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

    {

    //beginPath,moveto,LineTo,stroke,strokestyle,LineWidth,LineCap,globleAlpha

    ctx2.beginPath();

    ctx2.moveto(this.x[i],600);

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

    ctx2.lineWidth = 20;

    ctx2.lineCap = "round";

    ctx2.strokestyle = "purple";

    ctx2.stroke();

    }


    }


    var can1;

    var can2;


    var ctx1;

    var ctx2;


    var canWidth;

    var canHeight;


    var lastTime;

    var deltaTime;


    var bgPic = new Image();

    var ane;


    document.body.onload = game;/*body 加载完后把game作为所有js脚本的入口*/

    function game()

    {

    init();//console.log("onload");//输出普通信息

    lastTime = Date.now();

    deltaTime = 0;

    gameloop();

    }

     

     function init()

     {       

           //获得canvas context

           can1 = document.getElementById("canvas1");//fishes,dust,UI,circle

           ctx1 = can1.getContext("2d");//获得2D场景

           can2 = document.getElementById("canvas2");//background,ane,fruits

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


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

           

           canWidth = can1.width; 

           canHeight = can1.height;


           ane = new aneObj();

           ane.init();


     }

    function gameloop()

    {

    window.requestAnimationFrame(gameloop);//比setInterval,setTimeout(time)更科学智能计算 

    var now = Date.now();

    deltaTime = now - lastTime;

    lastTime = now;


    drawBackground();

    ane.draw();


    分别是html,ane,main的

    谢谢你哦

  • 用户198822
    2016-11-25 00:31:25

    贴代码看看  可能是没有在循环里面调用吧

    xiaxia...

    我把代码贴出来了

    2016-11-25 21:05:01

    共 1 条回复 >

HTML5小游戏---爱心鱼(上)

学做HTML5游戏,轻轻松松带你上手,适合刚入手游戏开发的同学

92353 学习 · 550 问题

查看课程

相似问题