Javascript 为什么画布右侧的图形会改变画布左侧的像素？

我正在使用canvas为音频创建一个波形图形均衡器

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

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

为什么?

多谢各位

const c=document.getElementById（'c'）；
const ctx=c.getContext（'2d'）；
常数[r，g，b]=[0,0,0]；
const{height}=ctx.canvas；
const colorNode=document.getElementById（'color'）；
const-annexationnode=document.getElementById（‘叙述’）；
var x=0；
ctx.lineWidth=1；
常量间隔=设置间隔（（）=>{
x++；
如果（x>500）清除间隔（间隔）；
叙事节点.innerHTML=叙事.map(
（叙事，i）=>叙事和&x>=i
？`
${叙述}
`
: ''
).加入（“”）；
常数裕度=x/5；
常数梯度=ctx.createLinearGradient(
0，边距，0，高度边距
);
gradient.addColorStop（0，`rgba（${r}，${g}，${b}，0）`）；
gradient.addColorStop（0.5，`rgba（${r}，${g}，${b}，1）`）；
gradient.addColorStop（1.0，`rgba（${r}，${g}，${b}，0）`）；
ctx.strokeStyle=梯度；
ctx.moveTo（x，保证金）；
ctx.lineTo（x，高度裕度）；
ctx.stroke（）；
var pixel=ctx.getImageData（25,5,1,1）.data；
var rgba='rgba（'+像素[0]+'，'+像素[1]+
“，”+像素[2]+“，”+（像素[3]/255）+”）；
colorNode.innerHTML=rgba+'，'+x；
},90)
var-idx=0；
常量叙述=[]；
idx+=00；旁白[idx]=“我们正在监控位于25x5位置的画布上单个像素的alpha通道。”；
idx+=10；旁白[idx]=“当梯度扫过它时，它从0变为0.007。”；
idx+=15；旁白[idx]=“看到了吗？”；
idx+=40；旁白[idx]=“自然，渐变笔划绘制在该像素上，使其具有更高的alpha值。”；
idx+=40；旁白[idx]=“现在可以合理预期，除非重新绘制，否则该像素将保持不变。”；
idx+=40；旁白[idx]=“我们再也不会在这个像素上画画了，但无论如何，你都会看到它的alpha值发生变化！”；
idx+=35；旁白[idx]=“现在，等待三角形逐渐变细。”；
idx+=20；旁白[idx]=“一会儿，第二个三角形将开始形成，你将看到。”；
idx+=40；旁白[idx]=“…”
idx+=20；旁白[idx]=“现在看，第二个三角形开始形成。”；
idx=270；旁白[idx]=“第一个三角形的线条开始改变，呈现出尖锐的锯齿…”；
idx=330；旁白[idx]=“WTF”；
idx+=40；旁白[idx]=“为什么？”；
idx+=80；旁白[idx]=“现在观看上面的alpha通道值。。。它来了；
idx=460；旁白[idx]=“那里！”；
idx=490；旁白[idx]=“为什么画布右侧的图形会改变画布左侧的像素？”
#c{
背景：#fff；
}
身体{
背景：#333；
颜色：#ccc；
}


颜色在5,5=？

我的问题是：
您只缺少一个
起始路径，请参见下面的代码


const c=document.getElementById（'c'）；
const ctx=c.getContext（'2d'）；
const{height}=ctx.canvas；
var x=0；
const interval=setInterval（（）=>{
x+=2；
如果（x>500）清除间隔（间隔）；
保证金=x/5；
渐变=ctx.createLinearGradient（0，边距，0，高度边距）；
gradient.addColorStop（0，`rgba（0,0,0,0）`）；
渐变色停止（0.5，`rgba（0,0,0,1）`）；
gradient.addColorStop（1.0，`rgba（0,0,0,0）`）；
ctx.strokeStyle=梯度；
ctx.beginPath（）；
ctx.moveTo（x，保证金）；
ctx.lineTo（x，高度裕度）；
ctx.stroke（）；
}，10）
虽然触感不错。。。你不需要所有的叙述来解释你的问题。就这么简单。谢谢所以，canvas似乎会一次又一次地绘制它的每一条线，直到我调用beginPath（）。效率很低。