canvas基础学习（二）

一、图像绘制

canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式

1、ctx.drawImage(img,x,y);

img是指图像对象，x和y分别是这个图像左上角在canvas画布的坐标，而图像显示的大小为图像本身的像素值，超出canvas画布的部分不显示。

2、ctx.drawImage(img,x,y,w,h);

和上面的那个函数相比，可以控制图像在canvas中显示的宽度和高度，而不再是图片自身的高宽像素

3、ctx.drawImage(img , dx , dy , dw , dh , x , y , w , h);

这个又比之前的函数多了dx、dy、dw、dh这四个参数，这四个参数可以控制图片切片显示在canvas画布中。在图片上同样以左上角为原点，向右为X轴正方向，向下为Y轴正方向，这四个参数表示，在图片中在(dx,dy)这个坐标，切dw和dh大小的切片。然后将这个切片显示在canvas画布上。

最后这个img参数，不单单可以是Image对象，还可以是video对象，也可以是另外的canvas对象。所以可以通过该方法对video视频进行截屏，也可以通过加载canvas制作图像水印、放大镜、以及淘宝双11主会场那样的特效，一个canvas加载另一个canvas，也被称为canvas的离屏技术。

二、图像的像素级处理

1、ctx.getImageData(x , y , w , h);

这个方法是获取画布(x,y)坐标，宽高分别为w和h的像素对象。而这个对象的data属性，则是其rgba的值。一个画布的像素值是从画布的原点，从左向右，从上到下，一排一排的排列下来的。常用取出canvas像素值的方法有两种，一种是采用一层循环，另一种是采用双重for循环，代码如下：

((pixe = canvasW*y +图像学习缩放灰度转换黑度转换反相转换模糊处理马赛克处理

效果图为

用的图片是

2、图片放大镜

canvas放大镜

用的图片是