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>

2.video处理，对视频的每一帧进行处理

<script>
    window.onload=function (){
      let oV=document.getElementById('v1');
      let oC=document.getElementById('c1');
      let gd=oC.getContext('2d');

      let W=oC.width,H=oC.height;

      requestAnimationFrame(next);

      function next(){
        gd.drawImage(oV, 0, 0);

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

        for(let r=0;r<H;r++){
          for(let c=0;c<W;c++){
            data[(r*W+c)*4+0]=data[(r*W+c)*4+1]=data[(r*W+c)*4+2]=
            (data[(r*W+c)*4+0]+data[(r*W+c)*4+1]+data[(r*W+c)*4+2])/3;
          }
        }

        gd.putImageData(imageData, 0, 0);

        requestAnimationFrame(next);
      }
    };
    </script>
  </head>
  <body>
    <video src="movie.ogg" id="v1" autoplay loop style="display:none;"></video>
    <canvas id="c1" width="320" height="240"></canvas>
  </body>

3. 解决canvas在Mac下不清晰的问题

原理：根据设备的像素比，将对应的canvas的宽、高乘以相应的window.devicePixelRatio; 然后通过style限制canvas的大小]// 获取getPixelRatio: (context) => {

    let backingStore = context.backingStorePixelRatio ||
      context.webkitBackingStorePixelRatio ||
      context.mozBackingStorePixelRatio ||
      context.msBackingStorePixelRatio ||
      context.oBackingStorePixelRatio ||
      context.backingStorePixelRatio || 1;

    return (window.devicePixelRatio || 1) / backingStore;
  }

// 这里是d3-force的业务组件对应代码
this.canvas.attr('width', options.width)
.attr('height', options.height)

// dpr
// 也可用d3.style(); 如this.canvas.style('width', '100px')
this.ele.style.width = options.width/this.pixelRatio + 'px'
this.ele.style.height = options.height/this.pixelRatio + 'px'