HTML5画布全球复合操作教程

最新推荐文章于 2024-08-16 00:09:31 发布

limeiyans

最新推荐文章于 2024-08-16 00:09:31 发布

阅读量714

点赞数

分类专栏： HTML5画布全球复合操作教程文章标签： HTML5画布全球复合操作教程

本文链接：https://blog.csdn.net/limeiyans/article/details/18511883

版权

HTML5画布全球复合操作教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

与HTML5画布上执行一个复合操作,我们可以使用globalCompositeOperation画布的属性上下文。这个属性定义源和目标之间的复合操作的画布上。目的地是定义为画布状态前复合操作。源被定义为画布状态后复合操作。
我们可以执行一个十二复合操作包括source-atop来源——这个地方就是,source-out,source-over,destination-atop,destination-in,destination-out,destination-over,lighter, xor, 和 copy。除非另有说明,默认source-over复合操作。

重要的是要注意,一个画布上下文只能支持一个复合操作在整个生命周期。如果我们想使用多个组合操作,本教程一样,我们需要申请一个隐藏的画布上的操作,然后将结果可见的画布上。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      } 
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="430"></canvas>
    <canvas id="tempCanvas" width="578" height="430" style="display:none;"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var tempCanvas = document.getElementById('tempCanvas');
      var tempContext = tempCanvas.getContext('2d');

      var squareWidth = 55;
      var circleRadius = 35;
      var shapeOffset = 50;
      var operationOffset = 150;
      var arr = [];

      arr.push('source-atop');
      arr.push('source-in');
      arr.push('source-out');
      arr.push('source-over');
      arr.push('destination-atop');
      arr.push('destination-in');
      arr.push('destination-out');
      arr.push('destination-over');
      arr.push('lighter');
      arr.push('darker');
      arr.push('xor');
      arr.push('copy');

      // translate context to add 10px padding
      context.translate(10, 10);

      // draw each of the operations
      for(var n = 0; n < arr.length; n++) {
        var thisOperation = arr[n];

        tempContext.save();
        
        // clear temp context
        tempContext.clearRect(0, 0, canvas.width, canvas.height);

        // draw rectangle (destination)
        tempContext.beginPath();
        tempContext.rect(0, 0, squareWidth, squareWidth);
        tempContext.fillStyle = 'blue';
        tempContext.fill();

        // set global composite
        tempContext.globalCompositeOperation = thisOperation;

        // draw circle (source)
        tempContext.beginPath();
        tempContext.arc(shapeOffset, shapeOffset, circleRadius, 0, 2 * Math.PI, false);
        tempContext.fillStyle = 'red';
        tempContext.fill();
        tempContext.restore();

        // draw text
        tempContext.font = '10pt Verdana';
        tempContext.fillStyle = 'black';
        tempContext.fillText(thisOperation, 0, squareWidth + 45);

        // translate visible context so operation is drawn in the right place
        if(n > 0) {
          if(n % 4 === 0) {
            context.translate(operationOffset * -3, operationOffset);
          }
          else {
            context.translate(operationOffset, 0);
          }
        }

        // copy drawing from tempCanvas onto visible canvas
        context.drawImage(tempCanvas, 0, 0);
      }
    </script>
  </body>
</html>