前端实现旗帜飘动效果系列 (Ⅲ)：canvas2D实现（2） - 一行代码一行泪 - 开源中国

安宇雨 - 随手采集
2018-10-13 16:40:45
随手采集
0000-未整理-等待研究

本讲我们在上一讲的基础上，给旗子添加高光，使其看起来更加有立体感。我会用两种方式来分别实现这个效果，然后比较一下优劣，还是先讲原理。

方法一：在原来的代码drawImage之后通过 fillRect 函数来增加一个白色蒙层，通过透明度的递增和递减来模拟。具体多少透明度？当然你可以用数学的方法来求导计算出某一点的斜率，根据其大小和正负得出其透明度大小，斜率越大，透明度越小。这里用一种更取巧也效率更高的方法，即保存某一点前一个点的y轴坐标，与该点的y坐标相减，即可得到斜率的相对大小，因为两点之间的x轴上距离都是1px，所以y轴变化越大，|斜率|则越大。

方法二：先通过遍历 getImageData 函数返回的元素逐像素获取原始画布每个点的rgba值，然后每一帧通过运动函数对每个点的位置进行偏移，对比原画布，获取该点在原位置的rgba值，然后直接对a分量进行修改，修改的依据仍然是斜率。

这是方法一的代码，我只贴出修改的部分（// +++ 之间）：

var y = 0
// +++++++++++++++++++++
var lastY = 0
// +++++++++++++++++++++
var distance = 0
var tick = function () {
  if (stop) return false
  timeNow = Date.now()
  delta = timeNow - timeLast
  if (delta > interval) {
    timeLast = timeNow
    distance += (delta / 1000 * v)
    ctx.clearRect(0, 0, canvasWidth, canvasHeight)
    for (var x = 0; x < imgWidth; x++) {
      y = cftA * x * Math.sin(cftX * (x - distance)) + amplitude
      ctx.drawImage(image, x, 0, 1, imgHeight, x, y, 1, imgHeight)
      // +++++++++++++++++++++
      ctx.fillStyle = 'rgba(255,255,255,' + (x === 0 ? 0 : (y - lastY) * 0.5) + ')'
      ctx.fillRect(x, y, 1, imgHeight)
      // +++++++++++++++++++++
      lastY = y
    }
  }
  requestAnimationFrame(tick)
}

完整代码戳这里

Demo：See the Pen flag waving by canvas2d(rect) by Kay (@oj8kay) on CodePen.

方法二的核心代码如下：

var tick = function () {
  if (stop) return false
  timeNow = Date.now()
  delta = timeNow - timeLast
  if (delta > interval) {
    timeLast = timeNow
    distance += (delta / 1000 * v)
    // +++++++++++++++++++++
    for (var i = 0; i < canvasHeight; i++) {
      for (var j = 0; j < canvasWidth; j++) {
        if (i === 0) {
          yBuf[j] = cftA * j * Math.sin(cftX * (j - distance))
        }
        r = (i * canvasWidth + j) * 4
        g = r + 1
        b = r + 2
        a = r + 3
        oR = r + (~~(0.5 + yBuf[j])) * canvasWidth * 4
        oG = oR + 1
        oB = oR + 2
        oA = oR + 3
        offset = j === 0 ? 0 : (yBuf[j] - lastY) * 100
        pixels[r] = oPixels[oR] + offset
        pixels[g] = oPixels[oG] + offset
        pixels[b] = oPixels[oB] + offset
        pixels[a] = oPixels[oA]
        lastY = yBuf[j]
      }
    }
    ctx.putImageData(imgData, 0, 0)
    // +++++++++++++++++++++
  }
  requestAnimationFrame(tick)
}

这个方法做出的另外一点修改是，由于操作是对画布逐像素进行的，包括透明元素，所以既不用clearRect，也不用对Y轴进行偏移。

完整代码戳这里

Demo：See the Pen flag waving by canvas2d(pixel) by Kay (@oj8kay) on CodePen.

两个方法的效果图如下