Question

我有一个HTML画布，每当我在左侧添加一个新像素时，我想将当前内容向右滚动1个像素。基本上创建工程图效果

function draw()
{
    ctx.save();
    y += Math.floor((Math.random() * 10) - 5);
    ctx.fillStyle = 'blue';
    ctx.translate(1, 0);
    ctx.restore();
    ctx.fillRect(0,y,3,3);

    window.requestAnimationFrame(draw);
}

// init canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fillRect(0,0,canvas.width,canvas.height);

var y = 0;
draw();

由于某种原因，我在画布上没有任何视觉输出

Answer 1

目前尚不清楚您要使用的保存和还原操作是什么...
在下面的代码中，我删除了它们，并简化了您的代码，仅打印了一行

function draw() {
  y += Math.sin(y*23);
  ctx.fillStyle = 'blue';
  ctx.translate(1, 0);
  ctx.fillRect(0, y++, 3, 3);
  window.requestAnimationFrame(draw);
}

// init canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var y = 0;
draw();

<canvas id="canvas"></canvas>

但是，仅通过增加x坐标，就可以在没有转换的情况下达到相同的效果：

function draw() {
  y += Math.sin(y*23);
  ctx.fillStyle = 'red';
  ctx.fillRect(x++, y++, 3, 3);
  window.requestAnimationFrame(draw);
}

// init canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var y = 0; x = 0;
draw();

<canvas id="canvas"></canvas>

但是，如果您需要的只是一个漂亮的图表，则应查看chartjs：
https://www.chartjs.org/samples/latest/

无法在HTML画布内翻译

1 个答案: