context.drawImage(image,dx,dy); d指destination,s指source
context.drawImage(image,dx,dy,dw,dh)：dh和dw会默认地帮我们进行图片的缩放处理，也就是在整个canvas的dx,dy这个位置以dw，dh这样的宽和高来绘制image这样一个图片；
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
实例演练笔记：放大和缩小图像的方法，超过画布的裁剪，在画布内的显示
绿色是放大的图片，蓝色 是canvas大小，需要将图片放在中间，要算从图片的哪个位置开始截图，因此需要知道sx,sy：图片的大小的一半减去画布的一半的大小。
Canvas与鼠标交互
onmousedown,onmouseup,onmouseout,onmousemove
e.preventDefault()，阻止默认地事件响应
绿色的背景是整个Web页面，蓝色是canvas画布
获取图像像素
imageData = context.getImageData(x,y,w,h)
ImageData对象：width,height,data(data中存储了这个区域图像的像素信息)
putImageData:将已知的imageData放回Canvas画布中
imageData中的data是将图片的所有像素转换为一维的数组（将一个二维空间上的数据转换为一维数组）；如图所示，在这个像素里，四个元素一组：
灰度滤镜计算方式：var grey = r*0.3+g*0.59+b*0.11;
黑白滤镜计算方式：在灰度滤镜的基础上，if (grey>255/2) {v=255;}else{v=0;}
反色滤镜：255减去每个r,g,b；
模糊滤镜：http://www.imooc.com/video/9287
马赛克滤镜：http://www.imooc.com/video/9287
创建imageData:imageData = context.createImageData(w,h);
