Question

我正在尝试在灰色画布上绘制然后擦除矩形。我用红色绘制，然后用灰色绘制擦除。这适用于fillRect（），但不适用于strokeRect（）。在后一种情况下，它的作用就像不透明度/ alpha不是1.0。通过明确使用css＆＃34; opacity：1.0;＆＃34;或ctx.globalAlpha = 1来解决strokeRect（）的这个问题。

我包括问题的精简版。单击drawFillRect按钮绘制和＆＃34;擦除＆＃34;饱和的不透明红色填充矩形。单击drawStrokeRect按钮可以绘制半透明的矩形轮廓。多次点击红色，使轮廓更红，更红;多次点击灰色，使红色轮廓慢慢淡入灰色。我希望它表现得像填充的表壳 - 明亮，不透明的红色轮廓，然后清除灰色＆＃34;擦除＆＃34;。

＆＃13;

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
    <title></title>
    <style>
      canvas {background: Gray; opacity: 1.0;}
    </style>
  </head>

  <body>
    <canvas id="c" width="500" height="400"></canvas>
    <div>
    </div>
    <div>
      <button onclick="drawFillRect('Red')">drawFillRect('Red')</button>
      <button onclick="drawFillRect('Gray')">drawFillRect('Gray')</button>
      <button onclick="drawStrokeRect('Red')">drawStrokeRect('Red')</button>
      <button onclick="drawStrokeRect('Gray')">drawStrokeRect('Gray')</button>
    </div>
    <script>
      var  ce = document.getElementById("c");
      var ctx = ce.getContext('2d');
      ctx.globalAlpha = 1.0;
      function drawFillRect(color){ // GOOD: behaves like Alpha = 1.0
      ctx.fillStyle = color;
      ctx.fillRect(100,100,300,200);
      }
      function drawStrokeRect(color){ // BAD: behaves like Alpha = ~.5
      ctx.strokeStyle = color;
      ctx.strokeRect(100,100,300,200);
      }
    </script>
  </body> 
</html>

＆＃13;

javascript strokeRect opacity未设置为1

0 个答案: