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画布