js image 获取rgb_JS 之Canvas实现图像灰度化

阅读本文约需要6分钟

大家好，我是你们的导师，我每天都会在这里给大家分享一些干货内容(当然了，周末也要允许老师休息一下哈)。上次老师跟大家分享了JS之常用API合集的知识，今天跟大家分享下JS 之Canvas实现图像灰度化的知识。

1 JS 之Canvas实现图像灰度化 HTML5发布很长一段时间了，一直以来没有仔细的看过，学习后，发现HTML5中的Canvas组件功能是如此的强大，今天我们一起来看看HTML5 Canvas是怎么做到的吧！

1. 新建一个html页面，在body tag之间加入

<canvas id="myCanvas" >Gray Filtercanvas>

2. 添加一段最简单的JavaScript代码：

window.onload = function() { var canvas = document.getElementById("myCanvas");// do something here!!}

从Canvas对象获取绘制对象上下文Context的代码如下：

var context = canvas.getContext("2d");

在html页面中加入一幅图像的html代码如下:

<img id="imageSource" src="hanjiaren.jpg" alt="Canvas Source" /><