因为你延时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>