海葵不显示

来源:2-3 海葵绘制

_知更鸟

2016-11-07 15:35

58202e4f0001dd9505000300.jpg

58202e500001b3da05000401.jpg

并且html也引入了ane.js

通过注释掉bgPic.src = './src/background.jpg';  显示的是空白页面


写回答 关注

5回答

  • Harbeth丶R
    2016-12-05 22:19:50

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

    aneObj.prototype.draw = function () {

    ctx.clearRect(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();




    }


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


  • 忧郁的红姐姐
    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次动画
                };
    })();

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

  • 忧郁的红姐姐
    2016-11-07 15:47:24

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

    _知更鸟

    依然没有效果。。。

    2016-11-07 15:56:40

    共 1 条回复 >

  • 忧郁的红姐姐
    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();

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

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

92350 学习 · 551 问题

查看课程

相似问题