canvas 上下文中的多个 fill() ：rgba 透明颜色更改

Question

我使用 Firefox。我有一个 canvas 上的多个对象要填充半透明颜色 rgba (....) 的问题。似乎透明度系数在每次 fill() 时都与自身相乘。任何人都知道原因和避免这种情况的建议吗？在代码中，变量 singleStyleInit 可以从 true 翻转为 false 以查看两种编程方式，它们给出相同的结果。灰色圆圈应该具有相同的外观和透明度，无论是在 window 背景上还是在红色条上：它们没有！

      let canvas = document.getElementById ("layer") ;
      canvas.width = 1000 ; canvas.height = 100 ;
      let ctx = canvas.getContext("2d");
      // 1 red horizontal bar, 
      ctx.fillStyle = "red" ;
      ctx.fillRect (20, 30, 830, 40) ;
      // 8 grey transparent circles
      var singleStyleInit = true ;
      if (singleStyleInit) 
          ctx.fillStyle = "rgba(128,128,80,0.3)" ;
      for (var i = 0 ; i < 8 ; i++) {
          ctx.beginPath ;
          ctx.arc (50 + 110 * i, 50, 45, 0, 2*Math.PI) ;
          if (!singleStyleInit) 
              ctx.fillStyle = "rgba(128,128,80,0.3)" ;
          ctx.fill() ;
      }

body { 
    background-color: rgb(249, 249, 250) ;
}
div {
    position: relative;
    width: 100vw ;  height: 100vh ;
}
canvas {
    position: absolute ;
    top: 0px ; left: 0px ; 
}

  <div>
    <canvas id="layer"></canvas> 
  </div>

Answer 1

那是因为你从来没有真正开始过Path。你必须用括号 () beginPath()

来调用它

canvas 上下文中的多个 fill() ：rgba 透明颜色更改

Multiple fill() on a canvas context : rgba transparent colors change

html

javascript

css

canvas

fill