为什么我的javascript画布绘制功能失控了？

画布迭代器本应在整个画布上随机选择一个介于黄色和绿色之间的20px^2的正方形，但由于某种未知的原因，像素比正方形宽，直到画布的一半左右，像素被分割成非常高的列

预期的结果是让画布填充由随机黄色或绿色的20x20像素正方形组成的屏幕，画布自动缩放以改变大小和纵横比以适应窗口大小调整

实际结果是画布似乎产生了屏幕的三分之一，即非常短和宽的像素，下面是预期的颜色模式，后面是非常高的列，后面是所有这些后面的页面

我在其他地方问过也没用，我正在寻找任何能达到预期目标的解决方案，所以我对任何事情都持开放态度

片段：

var has=false
var hasload=false
console.log（window.innerHeight）
console.log（window.innerWidth）
console.log（window.innerWidth*1.5）
var=false
函数切换（）{
console.log（“+has.toString（））
如果（有）{
has=false
document.getElementById（'cx'）.classList.remove（'filtered'））
}否则{
has=true
document.getElementById（'cx'）.classList.add（'filtered'））
}
}
函数resize（）{
//窗口大小调整事件以查找画布大小
var h=窗内高度
var w=窗口宽度
var p=20
var ph=数学地板（h/p）
var pw=数学地板（带p）
让refcx=document.getElementById（'cx'）
refcx.width=pw
console.log（“调整大小”）
dynDraw（w，h，pw，ph，p）；
}
函数dynDraw（w，h，pw，ph，p）{
//什么
//用于调整大小事件后的图形
控制台日志（w+“w”、+h+“h”、+pw+“pw”、+ph+“ph”）
var c=document.getElementById（“cx”）；
var ctx=c.getContext（“2d”）；
ctx.imageSmoothingEnabled=错误
//ctx.fillStyle=“#ff0000”
//ctx.fillRect（20,20,150,100）；
ctx.fillStyle=“#00ff00”
对于（让row=0；row此行

ctx.fillRect(i, row, pw, pw)

应该是

ctx.fillRect(i, row, 1, 1)

相反

您还需要在
resize
处理程序中设置
width
和
height
。您只需设置
width

问题在于您已经调整了画布绘制区域（上下文）的大小这样，所需的每个正方形相对于上下文维度为1x1。
的
宽度
和
高度
属性控制画布元素和画布绘图上下文维度。CSS
宽度
和
高度
覆盖元素维度，但不影响绘图上下文维度s、 而是拉伸图形上下文以适合图元


var has=false
var hasload=false
console.log（window.innerHeight）
console.log（window.innerWidth）
console.log（window.innerWidth*1.5）
var=false
函数切换（）{
console.log（“+has.toString（））
如果（有）{
has=false
document.getElementById（'cx'）.classList.remove（'filtered'））
}否则{
has=true
document.getElementById（'cx'）.classList.add（'filtered'））
}
}
函数resize（）{
//窗口大小调整事件以查找画布大小
var h=窗内高度
var w=窗口宽度
var p=20
var ph=数学地板（h/p）
var pw=数学地板（带p）
让refcx=document.getElementById（'cx'）
refcx.width=pw
refcx.height=ph
console.log（“调整大小”）
dynDraw（w，h，pw，ph，p）；
}
函数dynDraw（w，h，pw，ph，p）{
//什么
//用于调整大小事件后的图形
控制台日志（w+“w”、+h+“h”、+pw+“pw”、+ph+“ph”）
var c=document.getElementById（“cx”）；
var ctx=c.getContext（“2d”）；
ctx.imageSmoothingEnabled=错误
//ctx.fillStyle=“#ff0000”
//ctx.fillRect（20,20,150,100）；
ctx.fillStyle=“#00ff00”
for（设行=0；行