七、融合

HTML 5 canvas globalCompositeOperation 属性

// 获取元素
var canvas = document.getElementById("myCanvas");
// 获取画笔
var ctx = canvas.getContext("2d");

// 绘制矩形
ctx.fillRect(0, 0, 200, 200);

// 改变填充色
ctx.fillStyle = "orange";
// 绘制矩形
ctx.fillRect(100, 100, 200, 200);

// 绘制矩形
ctx.fillRect(0, 0, 200, 200);

// 在 canvas 中有一个属性可以改变新老图形的覆盖方式
console.log(ctx.globalCompositeOperation);
ctx.globalCompositeOperation = "destination-over";
console.log(ctx.globalCompositeOperation);
// 改变填充色
ctx.fillStyle = "orange";
// 绘制矩形
ctx.fillRect(100, 100, 200, 200);