Javascript 使用画布创建雨。我可以创建一个从顶部落下或随机落下的水滴，但我如何组合这两种效果？
我正在尝试使用画布创建雨水效果。在代码中，我添加了注释第1点、第2点和第3点，以帮助您理解我所说的部分 点1创建具有随机x轴和y轴0的多个液滴。 注释掉的第3点创建了一个液滴，它正确地增加了y轴，从而使液滴下降。 我需要将点3应用于点1中创建的每个液滴。第2点是我尝试这样做的一部分，但它创建了一个新的液滴，该液滴较低，而不是降低先前创建的液滴 非常感谢您的帮助 史蒂夫 我在这里创建了一个JS提琴： /* ///// ///// ///// ///// */ var canvas=document.querySelectorcanvas； var c=canvas.getContext2d； var canvasWidth=window.innerWidth； var canvasHeight=window.innerHeight； canvas.width=window.innerWidth； canvas.height=window.innerHeight； //雨滴构造函数 函数RainDropStandardX、rainDropStandardY、不透明度{ this.rainDropStandardX=rainDropStandardX； this.rainDropStandardY=rainDropStandardY； this.opacity=不透明度； var dropTipX=rainDropStandardX+0； var dropTipY=rainDropStandardY+0； var dropBottomLeftX=雨滴标准X-15； var dropBottomLeftY=rainDropStandardY+40； var dropBottomRightX=雨滴标准X+15； var dropBottomRightY=rainDropStandardY+40； 这个。水滴=功能{ c、 开始路径； c、 moveTodropTipX，dropTipY；//右侧的行 c、 Bezier CurveToDropBottomLeftx，dropBottomLeftY，dropBottomRightX，dropBottomRightY，dropTipX，dropTipY； c、 fillStyle=RGBA43173255，+this.opacity+； c、 填充； } } /*第1点-这段代码生成多个液滴，但其y轴值从未增加*/ var rngPosY=0； 设置间隔函数{ var rngPosX=Math.random*画布宽度； var RngoCapacity=Math.random*1-0.1+0.1； var rainDrop=新降雨RNGPOSX、rngPosY、RNGO容量； 雨滴； //rngPosY+=10；/*点2-这将使下一个液滴降低并增加y轴。而不是降低单个液滴*/ }, 500; /*点3-创建单个液滴，然后y轴值增加*/ /* var rngPosY=0； var rngPosX=Math.random*画布宽度； var RngoCapacity=Math.random*1-0.1+0.1； 设置间隔函数{ c、 clearRect0，0，画布宽度，画布高度； var rainDrop=新降雨RNGPOSX、rngPosY、RNGO容量； 雨滴； rngPosY+=5； }, 1; */ * { 框大小：边框框； 边际：0px； 填充：0px； } 身体{ 身高：100%； 宽度：100%； } 帆布{ 背景色：000； } 帆布雨 您的浏览器不支持HTML画布。Javascript 使用画布创建雨。我可以创建一个从顶部落下或随机落下的水滴，但我如何组合这两种效果？,javascript,oop,html5-canvas,Javascript,Oop,Html5 Canvas,我正在尝试使用画布创建雨水效果。在代码中，我添加了注释第1点、第2点和第3点，以帮助您理解我所说的部分 点1创建具有随机x轴和y轴0的多个液滴。 注释掉的第3点创建了一个液滴，它正确地增加了y轴，从而使液滴下降。 我需要将点3应用于点1中创建的每个液滴。第2点是我尝试这样做的一部分，但它创建了一个新的液滴，该液滴较低，而不是降低先前创建的液滴 非常感谢您的帮助 史蒂夫 我在这里创建了一个JS提琴： /* ///// ///// ///// ///// */ var canvas=documen
你需要一个数组来保存你的水滴。在我的代码中，这个数组是：var rain。此外，您还需要一种方法来更新每一滴 另一个重要的想法是，如果y位置>画布高度，则可以从阵列中移除水滴 如果d.雨滴标准>画布高度{ rain.i，1； } var canvas=document.querySelectorcanvas； var c=canvas.getContext2d； var canvasWidth=canvas.width=window.innerWidth； var canvasHeight=canvas.height=window.innerHeight； //保存雨滴的阵列 var雨=[]； //雨滴构造函数 函数RainDropStandardX、rainDropStandardY、不透明度{ this.rainDropStandardX=rainDropStandardX； this.rainDropStandardY=rainDropStandardY； this.opacity=不透明度； //滴速：每滴的速度不同 此.v={ x:.5+数学随机， y:.5+数学随机*10 }; //控制台 这个。水滴=功能{ var dropTipX=此值。rainDropStandardX+0； var dropTipY=this.rainDropStandardY+0； var dropBottomLeftX=这个.rainDropStandardX-15； var dropBottomLeftY=this.rainDropStandardY+40； var dropBottomRightX=this.rainDropStandardX+15； var dropBottomRightY=this.rainDropStandardY+40； c、 开始路径； c、 moveTodropTipX，dropTipY；//右侧的行 c、 贝塞尔曲线 dropBottomLeftX， 左撇子， dropBottomRightX， 对,， 滴剂， 下垂的 ; c、 fillStyle=RGBA43173255，+this.opacity+； c、 填充； }; //更新放置位置的方法 this.update=函数{ 这个.x+=这个.v.x； this.y+=this.v.y； 这是水滴； }; } /*这段代码生成多个液滴，但其y轴值从未增加*/ var rngPosY=0； 设置间隔函数{ var rngPosX=Math.random*画布宽度； var RngoCapacity=Math.random*1-0.1+0.1； //你这个笨蛋 取出一个新的液滴并将其推入阵列中 rain.pushnew rain rngposx、rngPosY、rngocapacity； //rngPosY+=10/*这将使下一个液滴下降增加y轴。不降低单个液滴*/ }, 500; 功能框架{ window.requestAnimationFrameframe； c、 clearRect0，0，画布宽度，画布高度； //阵列中的每一滴水 rain.forEachd，i=>{ //更新位置并重新绘制下降 d、 更新； //如果trop不在画布上，则从阵列中移除该下拉列表 如果d.雨滴标准>画布高度{ rain.i，1； } }; } 框架 * { 框大小：边框框； 边际：0px； 填充：0px； } 身体{ 身高：100%； 宽度：100%； } 帆布{ 背景色：000； } 您的浏览器不支持HTML画布。
enxaneta，非常感谢。那真的很有帮助。它工作得很好，但有一部分我不太明白。首先出现在forEach中的d的用途是什么？我知道这是arrow函数中的一个条件，但是我不知道它的作用是什么。这里d代表水滴，rain是所有水滴的数组。对于阵列中的每个放置点，更新放置点的位置并再次绘制。然后，如果下拉菜单不在画布中，则从数组中删除该下拉菜单。如果愿意，可以在这里使用for循环：forlet i=0；i