quicksilvery
quicksilvery
2016-02-16 04:49

canvas在setInterval中无法画图(各参数传递正确)

10
  • canvas
  • setinterval

不使用setInterval能正常画图,但是如果给画图部分套上setInterval(function(){画图},6000) 以后,就画不出来了。 我在画图函数的各个位置都设置了alert,各个参数都正确地传递了。但是图就是画不出来。

window.onload = function (){






    var canvas = document.createElement('canvas');
    var canvas_width = $("body").css("width").split("p")[0];
    var canvas_height = $("body").css("height").split("p")[0];


    document.body.appendChild(canvas);
    canvas.id='homePageCanvas';
    canvas.width = canvas_width; 
    canvas.height = canvas_height;
    canvas.style.display="none";

    var ctx1 = document.getElementById('homePageCanvas');
    var ctx=ctx1.getContext("2d");


    var hei=canvas.height;
    var wid=canvas_width; //传递body尺寸



    var heartSize;  //心的大小

    var color= [
    ["#FDE09A","#F3A7AC","#F29A63","#EB6161","#D8220D"],
    ["#FFE67A","#B4D78D","#00989E","#F6AC1A","#D8220D"],
    ["#D9C7C9","#B38893","#C6A7BE","#8D6982","#D8220D"],
    ["#FFE67A","#00989E","#B4D78D","#F6AC1A","#D8220D"],
    ["#E0F1F4","#9BCB60","#629A30","#49BCBD","#9F0052"],
    ["#FBCB72","#E9528E","#F39700","#E61C64","#E7242E"],
    ["#6BC8F2","#FFF8A5","#F19DB4","#5064AE","#E61C64"],
    ["#EBF5EB","#EE869A","#A2D7DD","#CBE3AE","#00AACE"],
    ["#8AC782","#9E4F1E","#EF8453","#F8C499","#007746"],
    ["#EFEB56","#008CD6","#6CBB5A","#EB6EA0","#6F186E"]];
    //颜色数组


    var posAndSize=Math.floor(Math.random()*2);//决定取哪一组“坐标数组和尺寸数组”


    //坐标数组
    var pos=[[[1,1.5],[2,2],[4,5],[1,5],[2,4],[6,3],[8,1.7],[9,5]],
    [[1,2],[3,2],[4,4],[1,4],[2,3],[6,3],[8,3],[9,4]]];


    //尺寸数组
    var size=[[0.109375,0.109375,0.109375,0.08984375,0.08984375,0.2015625,0.140234375,0.08984375],
    [0.109375,0.125,0.109375,0.08984375,0.08984375,0.2015625,0.140234375,0.08984375]];





    //决定取哪一组颜色 0到9之间的整数
    var bColor=Math.floor(Math.random()*10+0);

    //画背景
    ctx.fillStyle=color[bColor][0];
    ctx.fillRect(0,0,wid,hei);

    //以下是出问题的部分,把setinterval( function(){},6000)拿掉,则画图正常
    setInterval(function(){
        for(var i=0;i<8;i++){

            //心形的坐标
            var initX=(wid/10)*(pos[posAndSize][i][0]);
            var initY=(hei/6)*(pos[posAndSize][i][1]);


            //心形的尺寸,旋转角度,颜色
            var heartSize=size[posAndSize][i]*wid/2.2;
            var rotateAng=Math.floor(Math.random()*80+(-40))*Math.PI/180;
            var colorX=color[bColor][Math.floor(Math.random()*4)+1];
            //


            //画心形
            ctx.save();
            ctx.beginPath();
            heartCurve(initX,initY,heartSize,rotateAng,colorX);
            ctx.restore(); 

        }
    },6000);




    function heartCurve(initX,initY,heartSize,rotateAng,color){

    this.centryX=initX;
    this.centryY=initY;
    this.heartSize=heartSize;
    this.rotateAng=rotateAng;
    this.color=color;

    //alert(this.centryX);


        var x = 1, y;       
        //alert(x);
        //alert(this.heartSize);



        ctx.translate(this.centryX,this.centryY);
        ctx.rotate(rotateAng);
        ctx.fillStyle = this.color;
        ctx.beginPath();
        //alert(x);
        do { 
            y = -this.heartSize*0.8*(Math.sqrt(1-x*x) + Math.pow(x*x,1/3)); 
            x -= 0.001; 

            ctx.lineTo(this.heartSize*x,y); 
        } while ( x >= -1 ); 
        //alert(x);
        do { 
            y = this.heartSize*0.8*(Math.sqrt(1-x*x) - Math.pow(x*x,1/3)); 
            x += 0.001; 
            ctx.lineTo(this.heartSize*x,y); 
        } while ( x <= 1 );
        //alert(x);


        ctx.closePath();
        //alert(this.color);

        //alert(this.color);
        ctx.fill();
        //alert(color);

    }

//把画的图设为背景
    document.body.style.background = "url('"+homePageCanvas.toDataURL()+"')";
    document.body.style.backgroundPosition="center";
    document.body.style.backgroundRepeat="no-repeat";
    document.body.style.backgroundAttachment="fixed";


} 
  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

1条回答

为你推荐