Javascript HTML5画布globalAlpha不工作

我需要使用透明而不使用

clearRect

方法创建平滑的绘制线，我尝试使用：

globalAlpha

和

strokeStyle

与rgba一起使用，如下所示：

ctx.strokeStyle=“rgba（红色频道、绿色频道、蓝色频道，

字母频道

）”

但这两种方法都不起作用。如何在没有clearRect方法的情况下绘制透明线。虽然我在每个绘图之前使用
clearRect
，但我需要在没有它的情况下工作

我的代码示例：


var el=document.getElementById（'c'）；
var ctx=el.getContext（'2d'）；
ctx.线宽=10；
ctx.lineJoin=ctx.lineCap='round'；
ctx.globalAlpha=“0.2”；
//ctx.strokeStyle=“rgba（255,0,0,150）”；
ctx.strokeStyle=“红色”；
var isDrawing，点数=[]；
el.onmousedown=函数（e）{
isDrawing=true；
push（{x:e.clientX，y:e.clientY}）；
};
el.onmousemove=功能（e）{
如果（！isDrawing）返回；
//clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
push（{x:e.clientX，y:e.clientY}）；
ctx.beginPath（）；
移动到（点[0].x，点[0].y）；
对于（变量i=1；i
canvas{border:1px solid#ccc}
每次鼠标移动时都会重新绘制整个路径，因此即使将
globalAlpha
值设置为0.2，分层效果也会使线条看起来坚实

选项1:
使用
clearRect
清除路径
onmousemove
然后重新绘制

选项2:
仅绘制路径的最后一段，但重叠是可见的：


var el=document.getElementById（'c'）；
var ctx=el.getContext（'2d'）；
ctx.线宽=10；
ctx.lineJoin=ctx.lineCap='round'；
ctx.globalAlpha=“0.2”；
//ctx.strokeStyle=“rgba（255,0,0,150）”；
ctx.strokeStyle=“红色”；
var isDrawing，点数=[]；
el.onmousedown=函数（e）{
isDrawing=true；
push（{x:e.clientX，y:e.clientY}）；
};
el.onmousemove=功能（e）{
如果（！isDrawing）返回；
//clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
push（{x:e.clientX，y:e.clientY}）；
ctx.beginPath（）；
//只画最后一段
如果（点长度>1）{
ctx.moveTo（点[points.length-2].x，点[points.length-2].y）；
ctx.lineTo（点[points.length-1].x，点[points.length-1].y）；
}
ctx.stroke（）；
ctx.closePath（）；
};
el.onmouseup=函数（）{
isDrawing=false；
点。长度=0；
};
canvas{border:1px solid#ccc}
每次鼠标移动时都会重新绘制整个路径，因此即使将
globalAlpha
值设置为0.2，分层效果也会使线条看起来坚实

选项1:
使用
clearRect
清除路径
onmousemove
然后重新绘制

选项2:
仅绘制路径的最后一段，但重叠是可见的：


var el=document.getElementById（'c'）；
var ctx=el.getContext（'2d'）；
ctx.线宽=10；
ctx.lineJoin=ctx.lineCap='round'；
ctx.globalAlpha=“0.2”；
//ctx.strokeStyle=“rgba（255,0,0,150）”；
ctx.strokeStyle=“红色”；
var isDrawing，点数=[]；
el.onmousedown=函数（e）{
isDrawing=true；
push（{x:e.clientX，y:e.clientY}）；
};
el.onmousemove=功能（e）{
如果（！isDrawing）返回；
//clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
push（{x:e.clientX，y:e.clientY}）；
ctx.beginPath（）；
//只画最后一段
如果（点长度>1）{
ctx.moveTo（点[points.length-2].x，点[points.length-2].y）；
ctx.lineTo（点[points.length-1].x，点[points.length-1].y）；
}
ctx.stroke（）；
ctx.closePath（）；
};
el.onmouseup=函数（）{
isDrawing=false；
点。长度=0；
};
canvas{border:1px solid#ccc}
选项3：使用两个画布，在主画布上-仅在鼠标释放时绘制，在第二个预览画布上，仅显示进度，因此即使在鼠标移动时也可以看到绘制。同样对于预览画布，我们需要做一些技巧，比如清理前面的线段，这样一切看起来都很好


//主画布
var el=document.getElementById（'c'）；
var ctx=el.getContext（'2d'）；
//预演
var el2=document.getElementById（'c2'）；
var ctx2=el2.getContext（'2d'）；
ctx.线宽=10；
ctx2.线宽=10；
ctx.lineJoin=ctx.lineCap='round'；
ctx2.lineJoin=ctx2.lineCap='round'；
ctx.strokeStyle=“rgba（255,0,0,0.5）”；
ctx2.strokeStyle=“rgba（255,0,0,0.5）”；
var isDrawing，点数=[]；
el2.onmousedown=函数（e）{
isDrawing=true；
push（{x:e.clientX，y:e.clientY}）；
ctx.beginPath（）；
ctx2.beginPath（）；
};
el2.onmousemove=函数（e）{
如果（！isDrawing）返回；
push（{x:e.clientX，y:e.clientY}）；
//只画最后一段
如果（点长度>1）{
ctx.moveTo（点[points.length-2].x，点[points.length-2].y）；
ctx.lineTo（点[points.length-1].x，点[points.length-1].y）；
//开始预览
ctx2.beginPath（）；
//从最后一行清除
ctx2.globalCompositeOperation=“目的地输出”；
ctx2.strokeStyle=“rgba（255,0,0,1）”；
ctx2.moveTo（点[points.length-2].x，点[points.length-2].y）；
ctx2.lineTo（点[points.length-1].x，点[points.length-1].y）；
ctx2.stroke（）；
//休息
ctx2.strokeStyle=“rgba（255,0,0,0.5）”；
ctx2.globalCompositeOperation=“源代码结束”；
//绘制新线段
ctx2.moveTo（点[points.length-2].x，点[points.length-2].y）；
ctx2.lineTo（点[points.length-1].x，点[points.length-1].y）；
ctx2.stroke（）；
}
};
el2.onmouseup=函数（）{
ctx2