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";


}

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答

Go 旅城通票 2016-02-16 06:08

关注

因为你延时6s才绘制心形，你设置背景的时候心形还没有当然绘制不出来

    <script>
        window.onload = function () {

            var canvas = document.createElement('canvas');
            var canvas_width = document.body.clientWidth;// $("body").css("width").split("p")[0];
            var canvas_height = document.body.clientHeight; //$("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);//如果背景色每次也要切换，将这句放入DrawHeart里面
            function DrawHeart() {/////////////

                ///var bColor = Math.floor(Math.random() * 10 + 0);///背景也随机变化


                ctx.clearRect(0, 0, wid, hei);//清空画布，要不会叠加

                //画背景

                //以下是出问题的部分，把setinterval( function(){},6000)拿掉，则画图正常

                ctx.fillStyle = color[bColor][0];
                ctx.fillRect(0, 0, wid, hei);
                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();

                }

                document.body.style.background = "url('" + homePageCanvas.toDataURL() + "')";//
            }




            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";

            DrawHeart();/////////////////////////调用绘制图形的方法，在方法里面设置背景


            setInterval(DrawHeart, 6000);////////计时器
        }
    </script>

本回答被题主选为最佳回答 , 对您是否有帮助呢?

报告相同问题？

关注问题

canvas在setInterval中无法画图(各参数传递正确)
2016-02-16 04:49

回答 1 已采纳因为你延时6s才绘制心形，你设置背景的时候心形还没有当然绘制不出来 ``` ```
请问canvas在React里面无法画图是为什么？
2018-09-30 05:29

回答 5 已采纳 ``` react呀，写了一个，看看有没有借鉴意义 Hello React! ```
html中canvas画图的数据单位是px吗？ html5 javascript
2021-08-18 15:18

回答 1 已采纳不是，是x,y轴坐标
十八、动画与canvas
2023-03-15 16:51

乘风xs的博客 setTimeout和setInterval不能保证时间精度，第二个参数只能保证何时将代码添加到浏览器的任务队列requestAnimationFrame(cb)的cb在浏览器重绘屏幕前调用requestAnimationFrame()的函数实际上可以接受一个参数，该...
python如何在canvas中加入图片 python 有问必答
2021-12-16 16:17

回答 2 已采纳这是图片 2.png下面是导入后的效果代码 from tkinter import * master = Tk() #创建Canvas设置宽度500,高度360,背景粉色 canvas = Ca
canvas和setInterval很诡异的问题
2016-05-17 10:00

回答 1 已采纳 setInterval是同时进行的，而且绘制扇形操作的是同一个变量，所以3个计时器效果都是最后一个的eAngle ，并且你只能清除最后一次的计时器，另外2个计时器还会一直运行，浪费资源要设置不
我可以在HTML canvas javascript中使用PHP wordwrap吗？ html5 javascript php
2017-07-15 02:23

回答 2 已采纳 I've found a solution to my problem. Difster got me headed down the right path with his link to a
Canvas简单动画-调用-帧23
2024-04-01 18:12

korgs的博客 js中的setIimeou和setInterval方法中的时间间隔并不准确，它只是规定了一个大致的时间，比如规定10m，则可能会在11秒执行。而且它是主动通知IE去改变，而最好的方式是让IE通知程序去做出改变，否则浏览器可能会在一...
在WXpy中绑定按钮事件触发matplotil中的画图功能 python 有问必答
2021-05-20 14:25

回答 2 已采纳代码中间的一些语句顺序颠倒了，会导致没有定义或对象没有xxx属性的错误，修改如下，可以正常显示。 import wx import numpy as np import matplotlib.py
在<canvas>标签中绘制的图形无法正常显示 html5
2017-06-26 13:55

回答 2 已采纳 ![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/6.gif)马上就贴，麻烦大神指教![图片](http
html5中怎么在canvas中画一个二叉树？ html5
2016-04-13 15:22

回答 1 已采纳用递归就可以画出来
在游戏中发挥HTML5 Canvas的潜能
2012-09-06 13:01

wolfman79的博客在游戏中发挥HTML5 Canvas的潜能目前，支持HTML 5的浏览器和Windows 8 Metro成为了游戏开发的候选方案。利用canvas（画布）可以实现硬件加速，你可以在上面绘制游戏的内容，通过一些技巧可以...
如何在 PyQt 应用程序中嵌入 Matplotlib 图
2022-10-07 15:14

Ko-walski的博客许多其他 Python 库——例如seaborn和pandas——利用Matplotlib后端进行绘图。这些绘图可以以与此处所示相同的方式嵌入到 PyQt5 中，并且在绘图时传递对轴的引用。
canvas人物动画—走路
2016-11-23 17:54

吃瓜群众欢乐多的博客如图所示，小人在一直走动，并且点击上下左右时，会改变人走动的方向源图片：源代码： ... ... 你的浏览器不支持canvas ... var canvas=document.getElementById('cavsElem'); // var ctx=ca
让canvas 支持事件
2012-07-09 15:46

zha_zi的博客了解canvas这个标签后，会发现在一个canvas类似一个img图片，在canvas中绘制的图形都是一个整体，所有的事件也都是发生在这一个标签上，没有办法直接判断事件是发生在canvas中的某个图形上。但是通过canvas中的路径...
没有解决我的问题, 去提问

悬赏问题

¥50 有数据，怎么建立模型求影响全要素生产率的因素
¥50 有数据，怎么用matlab求全要素生产率
¥15 TI的insta-spin例程
¥15 完成下列问题完成下列问题
¥15 C#算法问题, 不知道怎么处理这个数据的转换
¥15 YoloV5 第三方库的版本对照问题
¥15 请完成下列相关问题！
¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
¥15 求daily translation（DT）偏差订正方法的代码
¥15 js调用html页面需要隐藏某个按钮

码龄粉丝数原力等级 --

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

1条回答

码龄粉丝数原力等级 --

悬赏问题