介绍

• 实现烟花特效的一个组件，图案可选择五角星和三角形，会自动播放烟花音效，点击屏幕时会放一个烟花。
• 组件类型：画布组件
• 开发版本：OpenHarmony-2.2beta2-SDK
• 效果：
  

绘制图案

五角星

函数 draw_star 传的参数分别是烟花释放的圆心坐标，图案的颜色，图案移动的斜率，图案是否填充颜色。
红色框 内定义的变量中，x和y是图案中心的坐标，根据时间推移move_times增加，图案会沿着传进来的斜率直线移动，以达到烟花绽放的效果。变量a-h都是为了便于绘制五角星的图案而设的公式参数值，全局变量r_star是五角星的边长，最后都会在 绿色框 内的画布组件根据公式去绘制单个五角星图案

三角星

同样， draw_triangle 是绘制单个三角形并沿设定斜率移动的函数，函数的参数类型及作用与五角星的一致。全局变量r_triangle为三角形的边长

绘制烟花的绽放

设置图案移动的方向和距离

我设计了两种烟花绽放数量，一种是一个圆中有8个图案的，一种是一个圆中有10个图案的，它们的斜率都通过数学公式定义好了，于左图的全量中赋值于数学公式的参数，单个图案沿斜率方向移动的距离为全局变量R的数值。

图案的美化

设置了10种颜色的颜色字典，通过绘制图案函数中的参数 color 去控制颜色（黑色是作保护作用），颜色可通过单独设置数字110来选择，也可以通过随机数（110）去随机变化颜色。颜色填充也是如此，1为不填充，2为填充，也可随机产生1或2来随机变化是否填充颜色。

烟花的渐消失

通过图案位移的次数来控制图案颜色的透明度的变化，当透明度减为0时就实现了烟花的消失，然后再隔一定时间又赋值为0，如此循环释放烟花

烟花的循环绽放

draw开头的函数是绘制单个图案，Draw函数是绘制8个或10个图案围成圆形向外同速率扩展的图像，run开头的函数是被循环的函数，被循环的函数设置个定时器，实现烟花循环绽放。右图中的两个click函数是效果图下方按钮的点击事件，点击后会触发定时器的运行，同时通过设定布尔型变量来控制当图案为五角星时，三角星的定时器会清空。混合mix就是被循环函数既有五角星的又有三角星的绘制函数。 ctx.clearRect是清空画布，以此来实现图案的移动后上一个图案消失的效果。

触摸屏幕的位置会以此为圆心绽放烟花

hml

js

先获取触摸的地方相对于手机屏幕的位置坐标，然后将该坐标作为参数传递到被循环函数中，同理，另设一个定时器来循环

烟花的音效

hml

js

添加媒体组件，作为背景音乐，并设置该组件不显示，给其结束事件中添加方法start，以循环播放。

事件的生命周期设置

在应用置于后台或者关闭退出时都会置空定时器，处于后台隐藏的时候，暂停音频组件，再次打开时会自动循环播放。