曾几何时，网站上显示的灰度图像必须手动进行转换。现在使用HTML5画布，图像可以被巧妙的转换为灰色，而不必使用图像编辑软件。我下面有一个示例，展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色。贡献者：感谢达西·克拉克（我在Themify的合伙人）贡献jQuery和Javascript代码。

效果演示：http://webdesignerwall.com/demo/html5-grayscale/?

目的

这个示例的目的是向你展示如何使用HTML5和jQuery创建一个灰度/彩色图像的鼠标悬浮效果。在HTML5出现前，实现这个效果需要两幅图像，彩色的和灰度的版本。现在HTML5让创建这个效果更加容易和高效，因为灰色图像将会直接从原始文件生成。我希望你会发现这个脚本在例如陈列橱或者相片册的设计里相当有用。

下面的jQuery代码会找寻目标图像并生成一个灰度的版本。当鼠标悬浮在图像上，代码将会把灰度图像渐变为彩色的。

?

1. <mce:script?src="jquery.min.js"?mce_src="jquery.min.js"?type="text/javascript"></mce:script>??
2. <mce:script?type="text/javascript"><!--??
3. ???
4. ????????//?On?window?load.?This?waits?until?images?have?loaded?which?is?essential??
5. ????????$(window).load(function(){??
6. ???
7. ???????????????//?Fade?in?images?so?there?isn't?a?color?"pop"?document?load?and?then?on?window?load??
8. ???????????????$(".item?img").fadeIn(500);??
9. ???
10. ???????????????//?clone?image??
11. ???????????????$('.item?img').each(function(){??
12. ???????????????????????var?el?=?$(this);??
13. ???????????????????????el.css({"position":"absolute"}).wrap("<div?class='img_wrapper'?style="display:?inline-block"?mce_style="display:?inline-block">").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){??
14. ???????????????????????????????var?el?=?$(this);??
15. ???????????????????????????????el.parent().css({"width":this.width,"height":this.height});??
16. ???????????????????????????????el.dequeue();??
17. ???????????????????????});??
18. ???????????????????????this.src?=?grayscale(this.src);??
19. ???????????????});??
20. ???
21. ???????????????//?Fade?image??
22. ???????????????$('.item?img').mouseover(function(){??