为什么我在画布右侧的绘图会更改画布左侧的像素？

如何解决为什么我在画布右侧的绘图会更改画布左侧的像素？

我正在使用画布创建音频的波形图形均衡器。

我注意到画布上的所有像素都受到笔划对画布特定部分的影响。

如果我对画布的某个区域进行了更改，我希望画布的其他区域不会受到影响，但是我的期望没有得到满足。

为什么？

谢谢。

const c = document.getElementById('c');
const ctx = c.getContext('2d');
const [ r,g,b ] = [0,0];
const { height } = ctx.canvas;
const colorNode = document.getElementById('color');
const narrationNode = document.getElementById('narration');
var x = 0;
ctx.linewidth = 1;

const interval = setInterval(() => {
    x++;
  if (x > 500) clearInterval(interval);
  narrationNode.innerHTML = narration.map(
    (narrative,i) => narrative && x >= i
        ? `<li>${narrative}</li>`
      : ''
  ).join('');
    const margin = x/5;
  const gradient = ctx.createLinearGradient(
    0,margin,height-margin
  );
  gradient.addColorStop(0,`rgba(${r},${g},${b},0)`);
  gradient.addColorStop(0.5,1)`);
  gradient.addColorStop(1.0,0)`);
  ctx.strokeStyle = gradient;
  ctx.moveto(x,margin);
  ctx.lineto(x,height-margin);
  ctx.stroke();
  
  var pixel = ctx.getimageData(25,5,1,1).data;
  var rgba = 'rgba(' + pixel[0] + ',' + pixel[1] +
      ',' + pixel[2] + ',' + (pixel[3] / 255) + ')';
  colorNode.innerHTML = rgba + ',' + x;
},90)

var idx = 0;
const narration = [];
idx += 00; narration[idx] = 'We are monitoring alpha channel of a single pixel of this canvas at position 25x5.';
idx += 10; narration[idx] = 'It goes from 0 to 0.007 as the gradient sweeps across it.';
idx += 15; narration[idx] = 'See?';
idx += 40; narration[idx] = 'Naturally,the gradient stroke painted over this pixel,giving it a higher alpha value.';
idx += 40; narration[idx] = 'It is Now reasonable to expect that this pixel will remain unchanged unless painted over again.';
idx += 40; narration[idx] = 'We will not paint over this pixel ever again,yet,you are going to see its alpha value change anyway!';
idx += 35; narration[idx] = 'Now,wait until the triangle tapers.';
idx += 20; narration[idx] = 'In a moment a second triangle will begin to form,and you will see.';
idx += 40; narration[idx] = '...'
idx += 20; narration[idx] = 'Now watch,as the second triangle begins to form.';
idx = 270; narration[idx] = 'The lines of the FirsT triangle begin to change,taking on sharp aliasing...';
idx = 330; narration[idx] = 'WTF?';
idx += 40; narration[idx] = 'Why?';
idx += 80; narration[idx] = 'Now watch the alpha channel value above... here it comes!';
idx = 460; narration[idx] = 'There!';
idx = 490; narration[idx] = 'Why is my drawing on the right side of the canvas changing the pixels at the left side of my canvas?';

#c {
  background: #fff;
}
body {
  background: #333;
  color: #ccc;
}

<canvas id="c" height="100" width="500"></canvas>

<p>
 Color at 5,5 = <span id="color">?</span>
</p>

<h1>Here's my question:</h1>
<ul id="narration"></ul>

解决方法

您只是缺少一个beginPath，请参见下面的代码

const c = document.getElementById('c');
const ctx = c.getContext('2d');
const { height } = ctx.canvas;
var x = 0;

const interval = setInterval(() => {  
  x += 2;
  if (x > 500) clearInterval(interval);
  
  margin = x/5;  
  gradient = ctx.createLinearGradient(0,margin,height-margin);
  gradient.addColorStop(0,`rgba(0,0)`);
  gradient.addColorStop(0.5,1)`);
  gradient.addColorStop(1.0,0)`);  
  ctx.strokeStyle = gradient;
  
  ctx.beginPath();
  ctx.moveTo(x,margin);
  ctx.lineTo(x,height-margin);
  ctx.stroke();
  
},10)

<canvas id="c" height="100" width="500"></canvas>