生成一个渐变透明度的图片
时间: 2024-03-03 21:48:01 浏览: 24
生成渐变透明度图片的方法和生成渐变色图片的方法类似,只不过需要将颜色值中的 alpha 通道设置为透明度值。下面给出一个实现方式:
```javascript
const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, `rgba(255, 0, 0, 0)`);
gradient.addColorStop(0.5, `rgba(255, 255, 0, 0.5)`);
gradient.addColorStop(1, `rgba(0, 255, 0, 1)`);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
const img = new Image();
img.src = canvas.toDataURL();
```
这里我们同样创建了一个线性渐变对象,不同的是颜色值中添加了 alpha 通道的值,表示透明度。例如,红色在位置 0 处的 alpha 通道设置为 0,表示完全透明;绿色在位置 1 处的 alpha 通道设置为 1,表示完全不透明。中间的黄色则设置 alpha 通道为 0.5,表示半透明。
最终生成的图片就是一个从红色到绿色的渐变透明度图片。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)