Canvas—drawImage，鼠标交互,imageData,

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画布中

putImageData

imageData中的data是将图片的所有像素转换为一维的数组（将一个二维空间上的数据转换为一维数组）；如图所示，在这个像素里，四个元素一组：

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);