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 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

【Go 语言社区】 H5 APP 前端开发专业的 HTML 5 Canvas

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canva...

2686
来自专栏余生开发

flex.css

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

773
来自专栏yang0range

CSS的盒子模型

一个盒子中主要的属性就5个:width、height、padding、border、margin。 width是“宽度”的意思,CSS中width指的是内容的...

743
来自专栏前端萌媛的成长之路

元素垂直居中和水平居中的方法

1022
来自专栏河湾欢儿的专栏

表格案例

822
来自专栏Java后端技术

HTML标记语法之图片Img元素

641
来自专栏十月梦想

canvas画布实现矩形的绘制

绘制一个实心矩形cv.fillRect(x,y,width,height)绘制之前声明绘制的实心矩形颜色使用fillStyle

763
来自专栏Modeng的专栏

canvas学习总结六:绘制矩形

版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!! https://blog.csdn.net/qq_32135281...

431
来自专栏柠檬先生

jquery 层级选择器

关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :...

17410
来自专栏一个小程序员的成长笔记

Canvas 给图形绘制阴影

/** * 图形绘制阴影 */ function initDemo6() { var canvas = document.getElementByI...

3437

扫码关注云+社区