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();
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏james大数据架构

Android中Button

1.android:drawableTop="@drawable/accept"设置在按钮文本的上面绘制指定图片。可同时指定drawableLeft等其它方向 ...

1938
来自专栏Android干货

小程序实践(六):view内部组件排版

     ①、当水平排列的时候  , justify-content:center ; 决定水平居中

862
来自专栏每日一篇技术文章

weex-20-scroller组件

scroll-direction 值为horizontal 水平滚动,值为vertical 垂直滚动

722
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何在手机上开发仪表盘控件

设置仪表盘轴线段,打开集合编辑器,并点击"添加",Color属性(仪表盘轴线段的颜色)和SplitNumRate属性(仪表盘轴线段占总线段的比例,取值0-1),...

673
来自专栏云端架构

【云端架构】前端必备常用HTML标签

注释:开始标签的英文翻译是 start tag 或 opening tag,结束标签的英文翻译是 end tag 或 closing tag。

3966
来自专栏james大数据架构

LinearLayout(线性布局)

要点: android:orientation="vertical"垂直线性布局,"horizontal"水平线性布局 android:gravity="top...

1899
来自专栏余生开发

flex.css

.flex { display: -webkit-box; display: -webkit-flex; display: flex; }

1083
来自专栏python3

tkinter -- Canvas(4)

先使用 PhotoImage 创建 GIF 图像,再将 image 属性来设置为新创建的 img

432
来自专栏.Net移动开发

VS2017移动开发(C#、VB.NET)——Numeric控件的使用方式

若将该属性设置为“0”,该控件的背景色即为全透明的,显示为Smobiler窗体设计界面的背景色。

1191
来自专栏大数据钻研

CSS居中:完全指南(译)

CSS的居中是众多CSS难点的代表。为啥用CSS居中这么难呢?但是我认为这个问题其实并没有那么难啦,就是有很多种不同的方式可以达到居中的目的,这取决于不同的情景...

2797

扫码关注云+社区