Javascript HTML5画布中的按钮绘制问题

window.addEventListener（“加载”，（）=>{
const canvas=document.querySelector（“画布”）；
const ctx=canvas.getContext（“2d”）；
const color=document.querySelector（“颜色”）；
const strokeWeight=document.querySelector（“strokeWeight”）；
常量橡皮擦=document.querySelector（“#橡皮擦”）；
//变数
const clearButton=document.querySelector（“清除”）；
让绘画=虚假；
功能启动位置（e）{
绘画=真实；
抽签（e）；
}
函数finishedPosition（）{
绘画=假；
ctx.beginPath（）；
}
功能图（e）{
如果（e.which==1）{
ctx.lineCap=“圆形”；
ctx.lineTo（e.clientX，e.clientY）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.moveTo（e.clientX，e.clientY）；
}否则{
完成位置（）；
}
}
函数更改颜色（e）{
const color=e.target.value；
ctx.strokeStyle=颜色；
}
功能更改行程权重（e）{
常数冲程重量=e.目标值；
ctx.lineWidth=冲程重量；
}
函数Click橡皮擦（）{
ctx.strokeStyle=‘白色’；
}
//事件侦听器
canvas.addEventListener（“鼠标向下”，起始位置）；
canvas.addEventListener（“鼠标”，完成位置）；
canvas.addEventListener（“mousemove”，draw）；
颜色。addEventListener（“输入”，更改颜色）；
strokeWeight.addEventListener（“输入”，更改strokeWeight）；
橡皮擦。addEventListener（“单击”，单击橡皮擦）；
//钮扣
clearButton.addEventListener（“单击”，clearCanvas）；
函数clearCanvas（）{
clearRect（0，0，canvas.width，canvas.height）；
}
});
addEventListener（“调整大小”，调整画布大小）；
函数resizeCanvas（）{
//调整大小
canvas.height=window.innerHeight；
canvas.width=window.innerWidth；
}
调整画布的大小（）
*{
保证金：0；
填充：0；
框大小：边框框；
}
#帆布{
边框：0.0001px纯白；
}
html{
溢出：隐藏；
}
#清楚的{
位置：绝对位置；
排名：0；
左：0；
底部：-10px；
宽度：30px；
背景：rgba（70,70,70,0.32）；
边界：rgba（70,70,70,0.32）；
边框宽度：5px；
字体大小：粗体；
字体系列：Arial、Helvetica、无衬线字体；
字号：28px；
颜色：红色；
}
#清除：悬停{
过渡：0.4s；
背景：rgba（20,20,20,0.4）；
光标：指针；
字体大小：32px；
}
#明确：重点{
大纲：0；
}
#橡皮擦{
位置：绝对位置；
排名：0；
右：-2px；
底部：-10px；
宽度：30px；
背景：rgba（70,70,70,0.32）；
边界：rgba（70,70,70,0.32）；
边框宽度：5px；
字体大小：粗体；
字体系列：Arial、Helvetica、无衬线字体；
字号：28px；
颜色：红色；
}
#橡皮擦：悬停{
过渡：0.4s；
背景：rgba（20,20,20,0.4）；
光标：指针；
字体大小：32px；
}
#橡皮擦：聚焦{
大纲：0；
}
#橡皮擦{
高度：30px；
宽度：30px；
}
#颜色选择{
位置：绝对位置；
底部：0.5雷姆；
右：50%；
转化：translateX（50%）；
字体系列：Impact、Haettenschweiler、“Arial窄加粗”、无衬线；
字体大小：粗体；
}
#颜色选择：悬停{
光标：指针；
}
#冲程重量选择{
位置：绝对位置；
底部：3rem；
右：50%；
转化：translateX（50%）；
字体系列：Impact、Haettenschweiler、“Arial窄加粗”、无衬线；
字体大小：粗体；
}
#冲程重量{
宽度：200px；
}

涂料公司。
X
颜色
厚度
您只是错过了中的
&&painting

function draw(e) {   // draw
  if (e.which == 1 && painting) {

您只是错过了中的
&&painting

function draw(e) {   // draw
  if (e.which == 1 && painting) {

请阅读，特别是您已经在这些元素上使用
rgba
设置了alpha，因此它们是透明的。移除alpha。另一种方法是将它们放在画布元素的左侧和右侧，而不是使用绝对位置将它们放在画布的顶部。谢谢，我删除了导致透明度的alpha，现在它可以正常工作。请阅读，特别是您已经使用
rgba
对这些元素设置了alpha，因此它们是透明的。移除alpha。另一种方法是将它们放在画布元素的左侧和右侧，而不是使用绝对位置将它们放在画布的顶部。谢谢，我删除了导致透明度的alpha，现在它工作正常。