canva怎么组合_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();

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值