canvas multiply、screen

最新推荐文章于 2024-10-01 20:01:18 发布

原创最新推荐文章于 2024-10-01 20:01:18 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #css

可视化专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了canvas中两种颜色混合模式——multiply和screen的计算过程，以及如何结合透明度进行颜色转换。multiply模式下，RGB通道值相乘并除以255得到混合色；screen模式中，颜色取反相乘后再取反。同时，文章阐述了透明度计算方法，即原图RGB乘以透明度加上底图RGB乘以（1-透明度）。这些概念在前端开发中的canvas应用中至关重要。

一。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
        }

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