HTML canvas(画布)globalCompositeOperation属性

• 

  globalCompositeOperation属性定义和用法

  globalCompositeOperation属性设置或返回如何将源（新）图像绘制到目标（现有）图像上。
  源图像=您将要放置在画布上的绘图。
  目标图像=已放置在画布上的图形。

• 

  globalCompositeOperation属性浏览器支持

  Internet Explorer	Chrome	FireFox	Safari	Opera
  9.0（含）以上	支持	支持	支持	支持

• 

  globalCompositeOperation属性语法

  context.globalCompositeOperation=“source-in”;

• 

  globalCompositeOperation属性实例

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(20, 20, 75, 50);
  ctx.fillStyle = "blue";
  ctx.globalCompositeOperation = "source-over";
  ctx.fillRect(50, 50, 75, 50);
  ctx.fillStyle = "red";
  ctx.fillRect(150, 20, 75, 50);
  ctx.fillStyle = "blue";
  ctx.globalCompositeOperation = "destination-over";
  ctx.fillRect(180, 50, 75, 50);
  

  尝试一下
• 

  globalCompositeOperation属性/返回值

  参数	描述
  source-over	默认。在目标图像上显示源图像
  source-atop	在目标图像上显示源图像。源映像中位于目标映像之外的部分没有显示
  source-in	将源映像显示到目标映像。只显示目标图像中源图像的一部分，且目标图像是透明的
  source-out	从目标图像中显示源图像。只显示源图像在目标图像之外的部分，且目标图像是透明的
  destination-over	在源图像上显示目标图像
  destination-atop	在源图像上显示目标图像。不显示源映像之外的目标映像的部分
  destination-in	将目标图像显示在源图像中。只显示源图像中目标图像的一部分，源图像是透明的
  destination-out	从源图像中显示目标图像。只显示源图像外部的目标图像部分，源图像是透明的
  lighter	显示源图像+目标图像
  copy	显示源图像。目标图像被忽略
  xor	源映像通过使用独占映像或与目标映像组合

• 

  globalCompositeOperation属性相关页面

  HTML教程：HTML脚本

  HTML教程：HTML画布