canvas绘制图片

绘制图片，要求图片必须在加载完成之后。
drawImage(img,x,y)图片有多大绘制多大；
drawImage(img,x,y,iw,ih)将图片绘制到指定大小内，会压缩或拉伸图片；
drawImage(img,ix,iy,iw,ih,cx,cy,cw,ch)前4个参数决定从原图上指定位置剪下指定大小的图，绘制到指定位置的画布上的指定大小，会压缩或拉伸图片。
getImageData(x,y,w,h)获取指定范围内的像素信息
putImageData(imgData,x,y)向指定范围内绘制像素信息
clip()裁剪：

1. 必须有一条封闭的路径
2. 路径必须在clip之前创建
3. clip必须在drawImage之前调用

我么可以使用给定的方法，完成图片的一些滤镜效果。

反色

    arr[i] = 255-arr[i];
    arr[i+1] = 255-arr[i+1];
    arr[i+2] = 255-arr[i+2];

灰度

arr[i]=arr[i+1]=arr[i+2]=(arr[i]+arr[i+1]+arr[i+2])/3;

视频也可以通过此方式改变播放的颜色。

//first,获取画布
var canvas = document.querySelector("#canvas");
//second,获取绘制环境
var ctx = canvas.getContext("2d");
var video = document.querySelector("video");

video.oncanplaythrough = function(){
  function _run(){

    ctx.drawImage(video,0,0);

    var data = ctx.getImageData(0,0,500,500);
    console.log(data);
    var arr = data.data;
    for (var i = 0; i < arr.length; i+=4) {
      //反色
      arr[i] = 255-arr[i];
      arr[i+1] = 255-arr[i+1];
      arr[i+2] = 255-arr[i+2];

      // 灰度
      arr[i]=arr[i+1]=arr[i+2]=(arr[i]+arr[i+1]+arr[i+2])/3;
    }
    ctx.putImageData(data,0,0);
    requestAnimationFrame(_run);
  }
  _run();
}

图片样式

createPattern(img,repeatType) 创建平铺对象
repeatType:平铺类型 repeat-x repeat-y repeat no-repeat