Javascript 焰火JS定制

我已经整合了这个焰火画布：

我可以更改粒子的速度、宽度或数量，但不能更改粒子形状。 我想用一个美元符号png/jpg图像或一个美元硬币图像来改变那个圆，而不是火线击中的那个圆

我确实查看了代码，但无法找出该圆是如何构造的。 如果你对此有任何想法，请帮助我

提前谢谢

在第128行之后 我已经为你添加了它。现在你必须把它变小，把x和y除以一半，使它居中。我没有这样做，所以你可以看到它在正确的位置

//在画布上设置动画时，最好使用requestAnimationFrame而不是setTimeout或setInterval //但并非所有浏览器都支持，有时需要前缀，所以我们需要一个垫片 window.requestAnimFrame=函数{ return window.requestAnimationFrame|| window.webkitRequestAnimationFrame|| window.mozRequestAnimationFrame|| 函数回调{ window.setTimeout回调，1000/60； }; }; //现在我们将为演示设置基本变量 var canvas=document.getElementById“canvas”， ctx=canvas.getContext“2d”， //全屏尺寸 cw=窗宽， ch=窗内高度， //烟花收藏 烟花=[]， //粒子收集 粒子=[]， //起始色调 色调=120， //当一次点击发射焰火时，太多的焰火在没有限制器的情况下一次发射，每5次循环发射一次 限制器总数=5， 利米蒂克=0， //这将是自动发射烟花的时间，每80圈发射一次 timerTotal=80， timerTick=0， mousedown=false， //鼠标x坐标， mx， //鼠标y坐标 我的 //设置画布尺寸 canvas.width=cw； canvas.height=ch； var img=新图像； img.src=https://img.freepik.com/free-vector/dollar_53876-25498.jpg?size=338&ext=jpg; //现在我们将为整个演示设置函数占位符 //获取一个范围内的随机数 函数随机最小值，最大值{ 返回Math.random*max-min+min； } //计算两点之间的距离 函数计算距离p1x，p1y，p2x，p2y{ 变量xDistance=p1x-p2x， Y距离=p1y-p2y； 返回Math.sqrt Math.pow xDistance，2+Math.pow yDistance，2； } //燃放烟花 功能烟花sx、sy、tx、ty{ //实际坐标 这是x=sx； y=sy； //起始坐标 this.sx=sx； this.sy=sy； //目标坐标 this.tx=tx； this.ty=ty； //起点到目标的距离 this.distanceToTarget=计算距离sx，sy，tx，ty； 此.distance=0； //跟踪每个焰火的过去坐标以创建轨迹效果，增加坐标计数以创建更突出的轨迹 this.coordinates=[]； 此.coordinateCount=3； //用当前坐标填充初始坐标集合 而这个协调帐户-{ this.coordinates.push[this.x，this.y]； } this.angle=Math.atan2 ty-sy，tx-sx； 这个速度=2； 该加速度=1.05； 这个。亮度=随机50，70； //圆目标指示器半径 此参数为1.targetRadius； } //更新烟花 Firework.prototype.update=函数索引{ //删除坐标数组中的最后一项 this.coordinates.pop； //将当前坐标添加到数组的开头 this.coordinates.unshift[this.x，this.y]； //循环旋转目标指示器半径 如果此.targetRadius小于8{ 这是0.targetRadius+=0.3； }否则{ 此参数为1.targetRadius； } //加快烟花的速度 此速度*=此加速度； //根据角度和速度获取当前速度 var vx=Math.cos this.angle*this.speed， vy=Math.sin this.angle*this.speed； //在施加速度的情况下，烟花会传播多远？ this.distance旅行=计算距离this.sx，this.sy，this.x+vx，this.y+vy； //如果移动的距离（包括速度）大于到目标的初始距离，则已到达目标 如果this.distance旅行>=this.distance目标{ 创建粒子this.tx，this.ty； //移除焰火，使用传递到update函数的索引来确定要移除的 1.拼接指数，1； }否则{ //未达到目标，继续行驶 这个.x+=vx； 这个.y+=vy； } } //燃放烟花 Firework.prototype.draw=函数{ ctx.beginPath； //移动到集合中最后一个跟踪的坐标，然后绘制一条到当前x和y的直线 ctx.moveTo this.coordinates[this.coordinates.length-1][0]，this.coordinates[this.coordinates.length-1][1]； ctx.lineTo this.x，this.y； ctx.strokeStyle='hsl'+色调+'，100%，'+this.brightness+'%； ctx.stroke； ctx.beginPath； //用一个脉冲圆圈画出这个烟花的目标 ctx.drawImageimg，this.tx，this.ty； ctx.arc this.tx，this.ty，this.targetRadius，0，Math.P I*2； ctx.stroke； } //创建粒子 函数粒子x，y{ 这个.x=x； 这个。y=y； //跟踪每个粒子的过去坐标以创建轨迹效果，增加坐标计数以创建更显著的轨迹 this.coordinates=[]； 此.coordinateCount=5； 而这个协调帐户-{ this.coordinates.push[this.x，this.y]； } //以弧度为单位，在所有可能的方向上设置一个随机角度 this.angle=random 0，Math.PI*2； 该速度=随机1，10； //摩擦力会使粒子减速 该摩擦系数=0.95； //将应用重力并将粒子向下拉 这是重力=1； //将色调设置为总色调变量的随机数+-50 this.hue=随机色调-50，色调+50； 这个。亮度=随机50，80； 这个α=1； //设置粒子淡出的速度 该衰减=随机0.015,0.03； } //更新粒子 Particle.prototype.update=函数索引{ //删除坐标数组中的最后一项 this.coordinates.pop； //将当前坐标添加到数组的开头 this.coordinates.unshift[this.x，this.y]； //减慢粒子的速度 这个速度*=这个摩擦力； //应用速度 this.x+=Math.cos this.angle*this.speed； this.y+=Math.sin this.angle*this.speed+this.gravity； //淡出粒子 这个α-=这个衰变； //根据传入的索引，在alpha足够低时移除粒子

---

如果this.alpha这是fiddle链接，请将代码直接包含在问题中，而不是作为外部链接。Check.draw=烟花的功能部分或注释后的Particleits//在第128行用一个脉冲圈画出烟花的目标。你可以经常画出你的图像和它们的库。实际上我用drawImage ear做过尝试但由于一些语法错误，无法正常工作，但现在可以了。再次感谢