EgretEngine 2Dでのグラデーションの描画方法

## サンプル
こんな感じの地面を書きたい場合
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/8539a487-f5e5-0762-ecf6-6960342de3a4.png)

## サンプルコード
このように書きます

```ts
        const matrix = new egret.Matrix();
        matrix.createGradientBox(width,height,Math.PI/2,0,0,0);	
        p.graphics.beginGradientFill(egret.GradientType.LINEAR,[fromColor,0x000000],[100,0],[0,0],matrix);
        p.graphics.drawRect(0, 0, width,height);
        p.graphics.endFill();
```

## API解説
### beginGradientFill	
グラデーションで塗りつぶしたい場合、`beginGradientFill`を`beginFill`の代わりに使います。

> ### beginGradientFill	() Method	 
> public beginGradientFill( type:string,colors:number[] ,alphas:number[] ,ratios:number[] ,matrix:egret.Matrix ):void
>
> - language version: 	Egret 2.4
> - Runtime version: 	Web,Native
> 
> Specifies a gradient fill that is used to subsequently call other Graphics methods of the object (such as lineTo() or drawCircle()). Calling the clear() method will clear the padding.
>
> #### parameter
> - type: string — The value of the GradientType class that specifies which gradient type to use: GradientType.LINEAR or GradientType.RADIAL.
> - colors: number [] — An array of RGB hexadecimal color values ​​used in the gradient (for example, red is 0xFF0000, blue is 0x0000FF, and so on). For each color, specify the corresponding value in the alphas and rampios parameters.
> - alphas: number [] — An array of alpha values ​​for the corresponding colors in the colors array.
> - ratios : number [] — An array of color distribution ratios. Valid values ​​are 0 to 255.
> - matrix: egret.Matrix — A transformation matrix defined by the egret.Matrix class. The egret.Matrix class includes the createGradientBox() method, which makes it easy to set the matrix for use with the beginGradientFill() method.

`type`引数でグラデーションパターンを指定します。次の`GradientType`APIを見てください。
`colors`と`alphas`で、グラデーションの開始色・透明度から終了色・透明度を指定します。
`ratios`は各グラデーション色・透明度の位置を指定します。位置は0から255で指定します。
`matrix`でグラデーションの塗り方を詳しく指定しますが、簡単に作成するメソッドが`Matrix`クラスに用意されています。

## egret.GradientType : グラデーション形式

線形`LINEAR`と放射状`RADIAL`が用意されています。

> ### egret.GradientType
> #### LINEAR : string
> [static] Used to specify the value of a linear gradient fill
> #### RADIAL : string
> [static] Used to specify the value of the radial gradient fill

## egret.Matrix.createGradientBox

グラデーションを描画するエリアを指定します。

`width`と`height`で大きさを指定します。`rotation`はグラデーションの向き(ratiosの0から255の方向)を指定します。こちらは反時計回りなのと単位はラジアンです。

tx,tyはオフセットを指定します。

> ### createGradientBox () method
> public createGradientBox ( width: number , height: number , rotation: number , tx: number , ty: number ): void
> 
> - language version: 	Egret 2.4
> - Runtime version: 	Web, Native
> 
> Creates a specific style of the matrix required by the beginGradientFill() and lineGradientStyle() methods of the Graphics class. The width and height are scaled to scaleX/scaleY pairs, while the tx/ty values ​​are offset by half the width and height.
> #### parameter
> - width: number — the width of the gradient box
> - height: number — the height of the gradient box
> - rotation: number — the amount of rotation in radians
> - tx: number — The distance, in pixels, to translate right along the x-axis. This value will be offset by half of the width parameter
> - ty: number — The distance, in pixels, to translate down the y axis. This value will be offset by half of the height parameter
```