[canvas] canvas globalCompositeOperation 多图层顺序

david2tdw commented 4 years ago

context.globalCompositeOperation属性要写在两张排序图层的中间。

destination-over：旧图在上面。

david2tdw commented 4 years ago

图层从上往下：红 - 蓝 - 黄

<!DOCTYPE html>
<html>
  <body>
    <canvas id="myCanvas" width="300" height="150" style="border: 1px solid #d3d3d3;">
      Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
      var c = document.getElementById('myCanvas')
      var ctx = c.getContext('2d')

      ctx.fillStyle = 'red'
      ctx.fillRect(150, 20, 75, 50)
      ctx.globalCompositeOperation = 'destination-over'

      ctx.fillStyle = 'blue'
      ctx.fillRect(180, 50, 75, 50)
      // ctx.globalCompositeOperation="destination-over";

      ctx.fillStyle = 'yellow'
      ctx.fillRect(190, 60, 75, 50)
      // ctx.globalCompositeOperation = 'destination-over'
    </script>
  </body>
</html>

david2tdw commented 4 years ago

图层从上往下：蓝 - 红 - 黄

<!DOCTYPE html>
<html>
  <body>
    <canvas id="myCanvas" width="300" height="150" style="border: 1px solid #d3d3d3;">
      Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
      var c = document.getElementById('myCanvas')
      var ctx = c.getContext('2d')

      ctx.fillStyle = 'red'
      ctx.fillRect(150, 20, 75, 50)
      // ctx.globalCompositeOperation = 'destination-over'

      ctx.fillStyle = 'blue'
      ctx.fillRect(180, 50, 75, 50)
      ctx.globalCompositeOperation="destination-over";

      ctx.fillStyle = 'yellow'
      ctx.fillRect(130, 50, 75, 50)
      // ctx.globalCompositeOperation = 'destination-over'
    </script>
  </body>
</html>

david2tdw commented 4 years ago

图层从上往下：黄 - 蓝 - 红

<!DOCTYPE html>
<html>
  <body>
    <canvas id="myCanvas" width="300" height="150" style="border: 1px solid #d3d3d3;">
      Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
      var c = document.getElementById('myCanvas')
      var ctx = c.getContext('2d')

      ctx.fillStyle = 'red'
      ctx.fillRect(150, 20, 75, 50)
      // ctx.globalCompositeOperation = 'destination-over'

      ctx.fillStyle = 'blue'
      ctx.fillRect(180, 50, 75, 50)
      // ctx.globalCompositeOperation="destination-over";

      ctx.fillStyle = 'yellow'
      ctx.fillRect(210, 70, 75, 50)
      ctx.globalCompositeOperation = 'destination-over'
    </script>
  </body>
</html>

david2tdw commented 4 years ago

图层从上往下：黄 - 蓝 - 红

<!DOCTYPE html>
<html>
  <body>
    <canvas id="myCanvas" width="300" height="150" style="border: 1px solid #d3d3d3;">
      Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
      var c = document.getElementById('myCanvas')
      var ctx = c.getContext('2d')

      ctx.fillStyle = 'red'
      ctx.fillRect(150, 20, 75, 50)
      // ctx.globalCompositeOperation = 'destination-over'

      ctx.fillStyle = 'blue'
      ctx.fillRect(180, 50, 75, 50)
      // ctx.globalCompositeOperation="destination-over";

      ctx.fillStyle = 'yellow'
      ctx.fillRect(210, 70, 75, 50)
      // ctx.globalCompositeOperation = 'destination-over'
    </script>
  </body>
</html>

david2tdw commented 4 years ago

globalCompositeOperation 默认值为source-over，即在目标图像上显示源图像。

源图像 = 您打算放置到画布上的绘图。目标图像 = 您已经放置在画布上的绘图。

HTML 5 canvas globalCompositeOperation 属性

david2tdw / blog

[canvas] canvas globalCompositeOperation 多图层顺序 #184