david2tdw/blog

[canvas] canvas globalCompositeOperation 多图层顺序

Opened this issue · 6 comments

david2tdw commented
[canvas] canvas globalCompositeOperation 多图层顺序
david2tdw commented

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

destination-over： 旧图在上面。

david2tdw commented

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

<!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

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

<!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

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

<!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

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

<!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

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

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

HTML 5 canvas globalCompositeOperation 属性