Javascript 在HTML画布上绘制重叠内容时如何重置透明度？

我用半透明的颜色（例如，

rgba（255,0,0,0.5）

）在画布上画画。当我再次在同一区域上绘制时，透明度值似乎在增加，从而产生不透明的颜色。是否有办法保留源的透明度值（我用来绘制的半透明颜色）？

使用

alpha=1

绘制屏幕外画布。然后只需将

ctx.globalAlpha

设置为您希望的任何值，即可将屏幕外画布渲染到显示画布。这样你就可以画到太阳下山，而不需要在阿尔法上加任何东西。如果需要，也可以在绘制后轻松更改alpha

附加说明

如果图像中包含其他内容，则必须将其保留在另一层上，因为此方法依赖于屏幕画布被重置为每次更新所需的开始状态。在代码段中，这只是一个

clearRect

调用。但也可以替换为另一个现有层，或其组合

浏览器可以轻松处理许多屏幕外的画布，我刚刚完成了一项工作，60个全屏画布堆叠在一起（请注意，您的GPU需要RAM来保存图像，否则速度太慢），Chrome甚至没有闪烁。Firefox和IE同样有能力

更新

我添加了一个片段来演示我的意思。详细信息请参见底部相关代码的注释。只是一个简单的绘图界面

//获取画布设置鼠标并执行其他操作
var canvas=document.getElementById（“canV”）；
var ctx=canvas.getContext（“2d”）；
var w=画布宽度；
var h=画布高度；
变量鼠标={
x:0,，
y:0，
ButtonLastrow:0，//用户修改的值
按钮aw:0，
过：错，
};
函数mouseMove（事件）{
mouse.x=event.offsetX；mouse.y=event.offsetY；
如果（mouse.x==未定义）{mouse.x=event.clientX；mouse.y=event.clientY；}
如果（event.type==“mousedown”）{mouse.buttonRaw=1；
}如果（event.type==“mouseup”）{mouse.buttonRaw=0；
}else if（event.type==“mouseout”）{mouse.buttonRaw=0；mouse.over=false；
}else if（event.type==“mouseover”）{mouse.over=true；}
event.preventDefault（）；
}
canvas.addEventListener（'mousemove'，mousemove）；
canvas.addEventListener（'mousedown'，mouseMove）；
canvas.addEventListener（'mouseup'，mouseMove）；
canvas.addEventListener（'mouseout'，mouseMove）；
canvas.addEventListener（'mouseover'，mouseMove）；
addEventListener（“contextmenu”，函数（e）{canvas.preventDefault（）；}，false）；
//创建我们将绘制到的屏幕外图层
var layer1=document.createElement（“画布”）；
layer1.width=w；//与屏幕画布大小相同
层1.高度=h；
layer1.ctx=layer1.getContext（“2d”）；
//设置图形设置
layer1.ctx.lineCap=“圆形”；
layer1.ctx.lineJoin=“round”；
layer1.ctx.lineWidth=16；
layer1.ctx.globalAlpha=1；//将alpha设置为1绘制到该层；
//设置屏幕画布
ctx.globalAlpha=1；
ctx.textAlign=“中心”；
ctx.textb基线=“中间”；
ctx.font=“24px Arial黑色”；
var指令=真；
//显示不同层相互覆盖的颜色
变量colors=“#F00，#FF0，#0F0，#0FF，#00F，#F0F”。拆分（“，”；
var-currentCol=0；
//动画帧更新
函数更新（）{
clearRect（0,0，w，h）；//在屏幕上清除
var c=layer1.ctx；//到later1上下文的捷径
if（mouse.buttonRaw）{//if鼠标按下
如果（mouse.lastx==未定义）{//这是绘图笔划的开始吗
mouse.lastx=mouse.x；//设置绘图笔划
mouse.lasty=mouse.y；
c、 strokeStyle=颜色[currentCol%颜色.长度]；
currentCol+=1；
instructions=false；//tuen他们已经计算出的指令
ctx.globalAlpha=0.6；//应该在接近分层时执行此操作，但lasy
}
//将拖动的笔划绘制到屏幕外图层
c、 beginPath（）；
c、 moveTo（mouse.lastx，mouse.lasty）；
c、 lineTo（mouse.x，mouse.y）；
c、 笔划（）；
mouse.lastx=mouse.x；
mouse.lasty=mouse.y；
}else{//如果鼠标按钮向上，则显示绘图画笔，如果
//还没有发生什么事
mouse.lastx=undefined；//将其用作拖动启动的信号量
ctx.fillStyle=颜色[currentCol%颜色.length]；
ctx.globalAlpha=0.6；//笔刷将合成alpha
//这可以通过将其绘制到
//屏幕外的图层，但您需要
//另一层或一些临时存储
//保护屏幕外的一层。我再次
//现在懒得去实现它。
ctx.beginPath（）；
弧（mouse.x，mouse.y，8,0，Math.PI*2）；
ctx.fill（）；
if（说明）{//如果需要，显示说明
ctx.fillStyle=“蓝色”；
ctx.globalAlpha=1；
ctx.fillText（“单击鼠标拖动绘制”，250,60）；
}
}
//在所需的alpha位置将屏幕外层绘制到屏幕画布上
ctx.drawImage（第1,0,0层）；
requestAnimationFrame（更新）；//再次执行所有操作。
}
mouse.lastx；//需要画线。
小鼠成形术；
update（）

body{background:url（'数据：image/png；base64，IVBORW0KGGOAANSUHEUGAAACAAAAAAGCAYAAABZENR0AAALLULEQVRYR+2WsQ0EIQwEbXpAopbrAZESUhQ1AAkBXVEDAb6jBRP8B0s+YJPKLNVSTYZRYZRYTTVAD096BUNYQZNBV3NAQ3NAQPFHXWAAZAAAZ8GYFSIJCZYH+ngyxqj4k3N+NKDUEP5W9W9W9W9WJ2RZBAAZG8B9W9ZYYYYYZKZKZYYYIZK8G=）；
背景尺寸：32px 32px；
背景重复：重复；
}
.canC{宽度：500px；黑格