Canvas 图形组合方式

最新推荐文章于 2024-01-15 00:33:17 发布

weixin_34037977

最新推荐文章于 2024-01-15 00:33:17 发布

阅读量364

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tinyTea/p/6692561.html

本文介绍了一种使用不同图形组合方式实现特殊视觉效果的方法。通过设置globalCompositeOperation属性为不同的值，如'source-atop'、'destination-over'等，可以在HTML5 Canvas上创建新图形覆盖原有图形或原有图形覆盖新图形等各种效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 图形组合
 */
function initDemo5() {
    var canvas = document.getElementById("demo5");
    if (!canvas) return;
    var context = canvas.getContext("2d");
    var oprtns = [
        "source-atop", // 新图形覆盖原有图形，新图形未重叠部分透明
        "source-in", // 新图形覆盖原有图形，所有未重叠部分透明
        "source-out", // 新图形的未重叠部分显示，原有图形和重叠部分透明
        "source-over", // 新图形覆盖原有图形
        "destination-atop", // 原有图形覆盖新图形，原有图形未重叠部分透明
        "destination-in", // 原有图形覆盖新图形，所有未重叠部分透明
        "destination-out", // 原有图形未重叠部分显示，新图形和重叠部分透明
        "destination-over", // 原有图形覆盖新图形
        "lighter", // 重叠部分颜色叠加
        "copy", // 只显示新图形
        "xor" // 所有未重叠部分显示，重叠部分透明
    ];
    var index = 10; // 修改选择图形组合参数
    context.fillStyle = "blue";
    context.fillRect(10, 10, 165, 165);
    context.globalCompositeOperation = oprtns[index]; // 设置图形组合方式
    context.beginPath();
    context.fillStyle = "red";
    context.arc(165, 165, 120, 0, Math.PI*2, false);
    context.fill();
    context.closePath();
}

转载于:https://www.cnblogs.com/tinyTea/p/6692561.html