前端实现旗帜飘动效果系列 (Ⅲ)：canvas2D实现（2）

2019独角兽企业重金招聘Python工程师标准>>>

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

     方法一：在原来的代码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 falsetimeNow = Date.now()delta = timeNow - timeLastif (delta > interval) {timeLast = timeNowdistance += (delta / 1000 * v)ctx.clearRect(0, 0, canvasWidth, canvasHeight)for (var x = 0; x < imgWidth; x++) {y = cftA * x * Math.sin(cftX * (x - distance)) + amplitudectx.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 falsetimeNow = Date.now()delta = timeNow - timeLastif (delta > interval) {timeLast = timeNowdistance += (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) * 4g = r + 1b = r + 2a = r + 3oR = r + (~~(0.5 + yBuf[j])) * canvasWidth * 4oG = oR + 1oB = oR + 2oA = oR + 3offset = j === 0 ? 0 : (yBuf[j] - lastY) * 100pixels[r] = oPixels[oR] + offsetpixels[g] = oPixels[oG] + offsetpixels[b] = oPixels[oB] + offsetpixels[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.

两个方法的效果图如下

通过chrome dev tool对两者的性能进行分析：

这是方法1的CPU占有率的变化：

这是方法2的：

哪个性能更好显而易见。方法二的性能虽然差，但是它的好处是灵活性更大，你甚至可以任意改变“光源”的位置。

   下一讲我会通过webgl对其进行重写，使其大部分的渲染逻辑从CPU转到GPU，可以使其的性能得到成倍的提高。建议大家先学习一下webgl的一些基本用法，包括矩阵的知识，着色器等。

转载于:https://my.oschina.net/codingDog/blog/1839099

总结

以上是生活随笔为你收集整理的前端实现旗帜飘动效果系列 (Ⅲ)：canvas2D实现（2）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。