Canvas是HTML5新增加的标签，它可以用来绘制图形，动画，以及实现各种各样的特效。下面将介绍如何利用Canvas实现图像过滤器效果。
1. 首先需要在HTML代码中添加Canvas标签。
<canvas id="canvas" width="600" height="400"></canvas>2. 在JavaScript代码中获取Canvas对象。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");3. 加载图像。
var img = new Image();
img.src = "image.jpg";
img.onload = function() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}4. 实现过滤器效果。
在Canvas中，我们可以通过getImageData()方法获取Canvas中每个像素的颜色信息。从而可以实现图像的各种特效。例如，下面的代码实现了灰度效果。
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
for(var i = 0; i < data.length; i += 4) {
var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg;
data[i + 1] = avg;
data[i + 2] = avg;
}
ctx.putImageData(imageData, 0, 0);5. 最后，将Canvas对象转换为图像。
var filteredImg = new Image();
filteredImg.src = canvas.toDataURL("image/jpeg");
document.body.appendChild(filteredImg);这样就实现了图像灰度效果。同样的，我们可以通过修改每个像素的颜色信息实现各种图像特效。