canvas和svg

1. canvas进行像素级操作

获取一块像素 => "数组"; let imageData = getImageData(x,y,w,h) (imageData是一个对象，包括'data', 'width', 'height' 三个属性)
设置一块像素 => "数组"->Canvas; putImageData(imageData)
创建一块像素 => 空白数组

一个像素占4位：rgba
r 0~255
g 0~255
b 0~255
a 0~255

应用：比如将图片色调点黄

 <script>
    window.onload=function (){
      let oC=document.getElementById('c1');
      let gd=oC.getContext('2d');
      let W=oC.width,H=oC.height;

      let oImg=new Image();
      oImg.src='http://127.0.0.1:8080/www/2.jpg';

      oImg.onload=function (){
        gd.drawImage(oImg, 0, 0);

        let imageData=gd.getImageData(0, 0, W, H);

        //黄=>扔掉蓝色
        for(let r=0;r<H;r++){
          for(let c=0;c<W;c++){
            //(r*W+c)*4+0       =>    red
            //(r*W+c)*4+1       =>    green
            //(r*W+c)*4+2       =>    blue
            //(r*W+c)*4+3       =>    alpha
            imageData.data[(r*W+c)*4+2]=0;
          }
        }

        //
        gd.putImageData(imageData, 0, 0);
      };
    };
    </script>