如何使用js写一个改变图片灰度的动画
时间: 2023-05-31 19:03:31 浏览: 58
以下是一个使用JavaScript实现图片灰度动画的例子:
HTML代码:
```
<img src="image.jpg" id="img">
```
JavaScript代码:
```
var img = document.getElementById("img");
var interval;
function grayscale() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgWidth = img.width;
var imgHeight = img.height;
canvas.width = imgWidth;
canvas.height = imgHeight;
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, imgWidth, imgHeight);
var pixels = imgData.data;
for (var i = 0; i < pixels.length; i += 4) {
var gray = pixels[i] * 0.3 + pixels[i + 1] * 0.59 + pixels[i + 2] * 0.11;
pixels[i] = gray;
pixels[i + 1] = gray;
pixels[i + 2] = gray;
}
ctx.putImageData(imgData, 0, 0);
img.src = canvas.toDataURL();
}
function animateGrayscale() {
clearInterval(interval);
var opacity = 1;
interval = setInterval(function() {
opacity -= 0.1;
if (opacity <= 0) {
clearInterval(interval);
} else {
img.style.opacity = opacity;
grayscale();
}
}, 100);
}
animateGrayscale();
```
这段代码首先获取了图片元素,并定义了一个`grayscale`函数用于将图片转换为灰度。然后,定义了一个`animateGrayscale`函数用于实现灰度动画效果。该函数使用`setInterval`函数定时执行,每次透明度减小0.1并调用`grayscale`函数转换图片为灰度,直到透明度为0为止。最后,在页面加载时调用`animateGrayscale`函数进行动画效果展示。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)