Javascript 画布绘制不应绘制的点

考虑以下代码片段：为什么矩形外有可见点？ 上下文颜色的切换是否比矩形的绘制慢

const templateCanvas=document.getElementById（“模板”）；
const tctx=templateCanvas.getContext（“2d”）；
tctx.fillStyle=“红色”；
tctx.fillRect（300300200200）
const canvas=document.getElementById（“canvas”）；
const ctx=canvas.getContext（“2d”）；
常数最大={
x:800，
y:800
};
常量站点=[]；
常数点=10000；
对于（设i=0；i‘rgba（255,0,0，’+alpha+’）；
常数c2=（α）=>{
让颜色=[
"rgba(78,9,12),"α+",，
"rgba(161,34,19),"α+",，
"rgba(171,95,44),"α+",，
"rgba(171,95,44),"α+",，
“rgba（252160,67，“+alpha+”）”
]
返回颜色[Math.round（Math.random（）*colors.length）]；
}
网站。forEach（p=>{
设imgData=tctx.getImageData（p.x，p.y，1，1）；
ctx.fillStyle=（imgData[0]==255）？c2（1）：c2（0）；
ctx.fillRect（p.x，p.y，2，2）
} );
我认为发生的情况是，随机颜色函数有时返回无效的颜色，因为它是从未定义的数组元素获取的。这是由于使用了
Math.round（）
而不是
Math.floor（）
：

因此，每隔一段时间，填充样式就会使用一个不好的颜色表达式，画布机制会忽略这一点。因此，在红色像素（正方形）覆盖的区域外会出现一些点。
我认为发生的情况是，随机颜色函数有时会返回无效颜色，因为它是从未定义的数组元素获取的。这是由于使用了
Math.round（）
而不是
Math.floor（）
：

因此，每隔一段时间，填充样式就会使用一个不好的颜色表达式，画布机制会忽略这一点。因此，在红色像素（正方形）覆盖的区域外会有一些点。
我想你想要的是随机颜色选择器中的
Math.floor（）
，而不是
Math.round（）
。这才是真正的解决办法。我现在觉得自己很笨。对编码来说太晚了（而且喝了太多啤酒）。非常感谢。将此作为答案发布，我将欣然接受@我想你想要的是随机颜色选择器中的
Math.floor（）
，而不是
Math.round（）
。这才是真正的解决办法。我现在觉得自己很笨。对编码来说太晚了（而且喝了太多啤酒）。非常感谢。将此作为答案发布，我将欣然接受@尖头的
return colors[ Math.round( Math.random() * colors.length ) ];