最近在看javascript DOM 编程艺术这本书
在书上看到这个例子,觉得摘抄下来
首先html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grayscale Canvas Example</title>
<script src="./modernizr.js"></script>
</head>
<body>
<img src="./a.jpg" id="avatar" title="Jeffry Sambells" alt="My Avatar">
<script src="grayscale.js"></script>
</body>
</html>
注:modernizr.js 是从www.modernizr.com上下载的 他是一个开源的javascript库 ,它提供了丰富的特性检测功能,有了它可以对html5 文档进行很好的控制。
下面是grayscale.js代码
function converToGS(img) {
// 如果浏览器不支持canvas就返回
if(!Modernizr.canvas) return;
// 存储原始颜色的彩色版
img.color = img.src;
// 创建灰度版
img.grayscale = createGSCan