不使用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";
}
因为你延时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>