Javascript高级编程学习笔记（94）—— Canvas(11) 合成

合成

除了之前介绍的属性之外,还有两个属性会应用到整个2d上下文中;

globalAlpha 用于指定所有绘制的透明度
globalComposition 用于表示后绘制的图形怎样与先绘制的图形进行结合
- 该属性的值是字符串,可能的值如下
  - source-over(默认) 后绘制的图形位于先绘制的图形的上方
  - source-in 后绘制的图形与先绘制的图形重叠部分可见,其它部分透明
  - source-out 后绘制的图形与先绘制的图形不重叠部分可见,先绘制的图形完全透明
  - source-atop 后绘制的图形与先绘制的图形重叠部分可见,先绘制的图形不受影响
  - destination-over 后绘制的图形位于先绘制图形的下方,只有之前透明的部分可见
  - destination-in 后绘制的图形位于先绘制图形的下方,两者不重叠部分完全透明
  - destination-out 后绘制的图形擦除与先绘制图形的重叠部分
  - destination-atop 后绘制的图形位于先绘制图形的下方,在两者不重叠的地方,先绘制的图形会透明
  - lighter 后绘制的图形与先绘制的图形重叠部分的值相加,使该部分的值变亮
  - copy 后绘制的图形完全替代与之重叠的先绘制图形
  - xor 后绘制图形与先绘制图形的重叠部分执行异或操作

示例如下:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Canvas合成</title>
    <meta name="Description" content=""/>
    <meta name="Author" content="lhy"/>
    <style>
        body{
           background-color: #75727c;
        }
    </style>
</head>
<body>


<canvas id="canvas" width="800px" height="400px" style="margin: 200px 200px"></canvas>

<script>
    
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');
  
      // 绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);

    // 绘制半透明蓝色矩形
    context.fillStyle = 'rgba(0,0,255,0.5)';
    context.fillRect (30,30,50,50);
</script>
</body>
</html>