刚开始学习html5，做了一个canvas多个图片下落的场景，出现多个图片重叠下落的问题
具体代码请看图片：<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;c...
具体代码请看图片：<!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>
展开
若以下回答无法解决问题，邀请你更新回答
展开全部
你的问题是啥呢
更多追问追答
追问
图片上的红框部分是问题，就是下落的时候一直下滑变成了一个条
追答
你换个画布背景就好了的
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
