将整个画布分成相等的列

Question

我正在尝试将整个画布分成 20 个相等的列，并在 y 轴上单独设置动画。目标是创建类似于此处的波浪滚动动画。首先，我尝试使用 php 生成的带有文本的图像创建波浪滚动效果，并尝试使用图像作为背景图像在单个div 中对它们进行动画处理。它在技术上有效，但性能和页面加载时间非常糟糕。现在我想用画布创建它：我已经拥有包含所有图像和文本的内容，并尝试对其进行动画处理。我尝试使用 getImageData() 将整个内容保存在列(矩形)中，然后我使用 ImageData 创建了创建的矩形并在循环中重新绘制它们，但性能再次很糟糕，尤其是在移动设备上。动画循环如下所示：

var animate = function(index, y) {
// The calculations required for the step function
var start = new Date().getTime();
var end = start + duration;
var current = rectangles[index].y;
var distance = y - current;
var step = function() {
// get our current progress
var timestamp = new Date().getTime();
var progress = Math.min((duration - (end - timestamp)) / duration, 1);
context.clearRect(rectangles[index].x, rectangles[index].y, columnWidth, canvas.height);
// update the rectangles y property
rectangles[index].y = current + (distance * progress);
context.putImageData(rectangles[index].imgData, rectangles[index].x, rectangles[index].y);
// if animation hasn't finished, repeat the step.
if (progress < 1)
requestAnimationFrame(step);
};
// start the animation
return step();
};

现在的问题是：如何将整个画布分成相等的列，并在 y 轴上以良好的性能对它们进行动画处理？有什么建议吗？也许在小精灵的帮助下.js/格林索克？提前感谢！

Answer 1

不要使用 getImageData 和 setImageData 来制作动画。画布是一个图像，可以像任何图像一样呈现。

做你想做的事

创建画布的第二个副本，并将该画布用作要呈现的条带的源。

例。

const slices = 20;
var widthStep;
var canvas = document.createElement("canvas");
var canvas1 = document.createElement("canvas");
canvas.style.position = "absolute";
canvas.style.top = canvas.style.left = "0px";
var ctx = canvas.getContext("2d");
var ctx1 = canvas1.getContext("2d");
var w = canvas.width;
var h = canvas.height;
function resize(){
canvas.width = canvas1.width = innerWidth;
canvas.height = canvas1.height = innerHeight;
w = canvas.width;
h = canvas.height;
ctx1.font = "64px arial black";
ctx1.textAlign = "center"
ctx1.textBaseLine = "middle";
ctx1.fillStyle = "blue";
ctx1.fillRect(0,0,w,h);
ctx1.fillStyle = "red";
ctx1.fillRect(50,50,w-100,h-100);
ctx1.fillStyle = "black";
ctx1.strokeStyle = "white";
ctx1.lineWidth = 5;
ctx1.lineJoin = "round";
ctx1.strokeText("Waves and canvas",w / 2, h / 2);
ctx1.fillText("Waves and canvas",w / 2, h / 2);
widthStep = Math.ceil(w / slices);
}
resize();
window.addEventListener("resize",resize);
document.body.appendChild(canvas);
function update(time){
var y;
var x = 0;
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i = 0; i < slices; i ++){
y = Math.sin(time / 500 + i / 5) * (w / 8);
y += Math.sin(time / 700 + i / 7) * (w / 13);
y += Math.sin(time / 300 + i / 3) * (w / 17);
ctx.drawImage(canvas1,x,0,widthStep,h,x,y,widthStep,h);
x += widthStep;
}
requestAnimationFrame(update);
}
requestAnimationFrame(update);