canvas multiply、screen

一。canvas multiply、screen计算过程

multiply 计算：r/g/b/a 分别相乘除以255及是混合后的值。

 function aM(left, right) {
          let newArr = []
          for(let i = 0; i < left.length; i++) {
            newArr.push(left[i] * right[i] / 255)
          }
          console.log(left, right, newArr)
          return newArr
        }

screen 计算：rgba取反相乘，之后再取反。

function aS(left, right) {
          let newArr = []
          let result = []
          for(let i = 0; i < left.length; i++) {
            const newLeft = 255 - left[i]
            const newRight = 255 - right[i]
            newArr.push(newLeft * newRight / 255)
          }
          for (let i = 0; i < newArr.length; i++) {
            result.push(255 - newArr[i])
          }
          console.log(newArr)
          return result
        }

透明度计算：原图的rgb乘以透明度加上底图的rgb乘以（1-透明度）。left 代表底图，right代表原图。

function alphaA(left, right, alpha) {
          const newArr = []
          for(let i = 0; i < left.length; i++) {
            const val = right[i] * alpha + (1 - alpha) * left[i]
            newArr.push(val)
          }
          return newArr
        }

计算操作：先计算混合然后再将透明度与混合后的值进行转换得出新的颜色。透明度的底图就是混合的底图。