具体代码请看图片：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>canvas绘制图片下落</title></head><body><canvas id="canvas" height="600" width="1024" style="border:1px solid #fac;">Your browser does not support the HTML5 canvas tag.</canvas></body><script> var bg = new Image(); bg.src = "images/bg_2.png" var flower = new Image(); flower.src = "images/bg_4.png"; var canvas = document.getElementById('canvas'); if(canvas == null) alert('error'); var context = canvas.getContext('2d'); var flowers = []; for(i=0;i<6;i++){ flowers[i] = new Flower(); } var f = new Flower(); setInterval(function(){ context.drawImage(bg,0,0); for(i=0;i<flowers.length;i++){ flowers[i].paint(); } },50); function Flower(){ this.x = Math.floor(Math.random()*(1024-flower.naturalWidth)); this.y = Math.floor(Math.random()*(600-flower.naturalHeight)); this.scale = Math.floor(Math.random()*71+30)/100; this.step = Math.floor(Math.random()*5+1); this.paint = function(){ this.y += this.step; context.save(); context.translate(this.x,this.y);//转变画布，移动画布 context.scale(this.scale,this.scale);//缩放画布 context.drawImage(flower,0,0); context.restore(); if(this.y>600){ this.y = -flower.naturalWidth; this.x = Math.floor(Math.random()*(1024-flower.naturalWidth)); } } } </script></html>
图片上的红框部分是问题，就是下落的时候一直下滑变成了一个条
追答你换个画布背景就好了的
追问答对了一半，是因为背景图片的长度小于画布的长度造成的
本回答被提问者采纳