1# CanvasGradient
2
3>  **NOTE**
4>
5>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7**CanvasGradient** provides a canvas gradient object.
8
9
10## addColorStop
11
12addColorStop(offset: number, color: string): void
13
14Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
15
16**Parameters**
17
18| Name    | Type    | Description                          |
19| ------ | ------ | ---------------------------- |
20| offset | number | Relative position of the gradient stop along the gradient vector, represented by the ratio of the distance between the gradient stop and the start point to the total length. The value ranges from 0 to 1.|
21| color  | string | Gradient color to set.                    |
22
23**Example**
24
25  ```html
26<!-- xxx.hml -->
27<div>
28  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
29</div>
30  ```
31
32  ```js
33// xxx.js
34export default {
35    onShow() {
36        const el = this.$refs.canvas;
37        const ctx = el.getContext('2d');
38        const gradient = ctx.createLinearGradient(50, 0, 300, 100);
39        gradient.addColorStop(0.0, '#ff0000')
40        gradient.addColorStop(0.5, '#ffffff')
41        gradient.addColorStop(1.0, '#00ff00')
42        ctx.fillStyle = gradient
43        ctx.fillRect(0, 0, 300, 300)
44    }
45}
46  ```
47
48  ![en-us_image_0000001152610806](figures/en-us_image_0000001152610806.png)
49