1、createImageData()
自己创建一个新的、空白的ImageDate对象
2、getImageData(x,y,width,height)
从画布上获取指定区域的像素点,作为一个新的ImageData对象(可以将照片放到画布上,然后获取照片的指定区域)
(x,y)为左上角起点坐标,width和height为指定区域的大小,可以为一个像素
3、putImageData(object,x,y)
将获得的对象放到画布的指定区域
object为指定画布区域对象,(x,y)为将对象放置在何处
!!4、获得的对象的返回值是一个数组
ImageData.date[0] = R //红
ImageData.date[1] = G //绿
ImageData.date[2] = B //蓝
ImageData.date[3] = alpha //透明度
以此类推,每四个为一个像素点。
注意:在把照片放到画布中时,由于浏览器加载顺序,需要将照片先加载然后再使用drawImage(img,0,0)添加到画布。
图片图片为三个阶段截屏效果,我用ps合在一起的
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta na