zoukankan      html  css  js  c++  java
  • Canvas 图形组合方式

    /**
     * 图形组合
     */
    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();
    }
    
  • 相关阅读:
    mysql读写分离
    mysql主从同步
    扫描与抓包
    加密与入侵检查
    监控
    selinux
    预期交互
    python发送邮件
    linux下安装虚拟环境
    博弈论
  • 原文地址:https://www.cnblogs.com/tinyTea/p/6692561.html
Copyright © 2011-2022 走看看