Fatal编程技术网
  • html/
  • HTML5画布-当alpha<；1.

HTML5画布-当alpha<；1.

html canvas

HTML5画布-当alpha<；1.,html,canvas,opacity,alpha,rgba,Html,Canvas,Opacity,Alpha,Rgba,在下面的示例中，相同的笔划样式产生不同的颜色，根据线条的长度（？）而变化 仅当α

在下面的示例中，相同的笔划样式产生不同的颜色，根据线条的长度（？）而变化

仅当α<1时才会发生这种情况

这种奇怪行为的原因是什么？有没有更好的方法来设置笔划的透明度，这样无论笔划的长度如何，我都能得到相同的结果

多谢各位

var c=document.getElementById（'c1'）；
var ctx=c.getContext（'2d'）；
ctx.fillStyle='#FFFFFF'；
ctx.fillRect（0,040400）；
ctx.线宽=10；
ctx.strokeStyle='rgba（0,025,0.3）'；
ctx.moveTo（10,10）；
ctx.lineTo（20,10）；
ctx.stroke（）；
ctx.moveTo（10,30）；
ctx.lineTo（40,30）；
ctx.stroke（）；
ctx.moveTo（10,50）；
ctx.lineTo（80,50）；
ctx.stroke（）；
ctx.moveTo（10,70）；
ctx.lineTo（160,70）；
ctx.stroke（）；
ctx.moveTo（10,90）；
ctx.lineTo（320,90）；
ctx.stroke（）

#c1{
边框：1px纯黑；
}






var c=document.getElementById（'c1'）；
var ctx=c.getContext（'2d'）；
ctx.fillStyle='#FFFFFF'；
ctx.fillRect（0,040400）；
ctx.线宽=10；
ctx.strokeStyle='rgba（0,025,0.3）'；
ctx.moveTo（10,10）；
ctx.lineTo（20,10）；
ctx.moveTo（10,30）；
ctx.lineTo（40,30）；
ctx.moveTo（10,50）；
ctx.lineTo（80,50）；
ctx.moveTo（10,70）；
ctx.lineTo（160,70）；
ctx.moveTo（10,90）；
ctx.lineTo（320,90）；
ctx.stroke（）

#c1{
边框：1px纯黑；
}




谢谢！你的回答使我对这个问题有了深入的了解。我需要在开始每一行之前添加
ctx.beginPath（）
（在
moveTo
之前）。如果我不这样做，显然旧路径不会被
stroke（）
丢弃，因此旧线条会再次绘制，因此它们的颜色会因为“累积”不透明度而变暗。这很聪明。我以后一定要知道这一点！谢谢你！因为您只创建了一条路径，但绘制了多次。要创建新路径，需要在定义和绘制它之前调用
ctx.beginPath（）
。在这里，parh的最终状态也覆盖了所有的第一状态，因此透明度降低。