### 介绍

- 实现烟花特效的一个组件，图案可选择五角星和三角形，会自动播放烟花音效，点击屏幕时会放一个烟花。

- 组件类型：画布组件

- 开发版本：OpenHarmony-2.2beta2-SDK

- 效果：


### 绘制图案

#### 五角星


函数 **draw_star** 传的参数分别是烟花释放的圆心坐标，图案的颜色，图案移动的斜率，图案是否填充颜色。

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

#### 三角星


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

### 绘制烟花的绽放

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

||||

|-|-|-|

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

#### 图案的美化

||

|-|

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

#### 烟花的渐消失

|||

|-|-|

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

### 烟花的循环绽放

|||

|-|-|-|

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

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

hml

||

|-|

js

||

|-|

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

### 烟花的音效

hml

||

|-|

js

||

|-|

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

### 事件的生命周期设置

||

|-|