HTML5_图片合成_刮刮卡

刮刮卡（图片合成）

定义： globalCompositeOperation 属性，设置或返回如何将源图像

将 myCanvas 的背景图设置为一张图片，（刮开后显示）

 

 

// 目标图像（已有的，外面一层即将被刮掉的那一图像）

pen.beginPath();

pen.fillStyle = "red";

pen.fillRect(100, 300, 100, 100);

 

// pen.globalCompositeOperation = "source-over";    / / 默认值

// pen.globalCompositeOperation = "source-atop";    // 

// pen.globalCompositeOperation = "source-in";    // 

// pen.globalCompositeOperation = "source-out";    // 

 

// pen.globalCompositeOperation = "desination-over";    // 默认值，目标图像在上

// pen.globalCompositeOperation = "desination-atop";    // 源图像以外的 目标图像 是透明的

// pen.globalCompositeOperation = "desination-in";         // 只有源图像以内的目标图像显示，其他部分图像是透明的

pen.globalCompositeOperation = "desination-out";       // 只有源图像以外的目标图像显示，其他部分图像是透明的

 

// 源图像（刮刮卡必须设置透明色，才能看见 myCanvas 的背景图）

pen.beginPath();

pen.fillStyle = "blue";

pen.fillRect(300, 300, 100, 100);