javascript - 将整个 Canvas 分成相等的列

Question

我试图将整个 Canvas 分成 20 个相等的列，并在 y 轴上单独为它们设置动画。目标是创建类似的波浪滚动动画，如 here 。首先，我尝试使用 php 生成的带有文本的图像创建波浪滚动效果，并尝试使用图像作为背景图像在单个 div 中对它们进行动画处理。它在技术上可行，但性能和页面加载时间非常糟糕。现在我想用 Canvas 创建它:我已经拥有包含所有图像和文本的内容，并尝试为其设置动画。我尝试使用 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();
};

现在的问题是:如何将整个 Canvas 分成相等的列，并在 y 轴上以良好的性能对它们进行动画处理？有什么建议么？也许在 Pixi.js/Greensock 的帮助下？提前致谢!

Answer 1

不要使用getImageData和setImageData来做动画。 Canvas 是一个图像，可以像任何图像一样进行渲染。

做你想做的事

创建 Canvas 的第二个副本，并使用该 Canvas 作为要渲染的 strip 的源。

示例。

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);